/**
 * Copyright (c) 2006-2012, JGraph Ltd
 */

Format = function(editorUi, container)
{
	this.editorUi = editorUi;
	this.container = container;
};

// 420
/**
 * Images leftOpen.
 */
Format.prototype.leftOpen = (!mxClient.IS_SVG) ? IMAGE_PATH + '/leftOpen.png' : '';
/**
 * Images rightClose.
 */
Format.prototype.rightClose = (!mxClient.IS_SVG) ? IMAGE_PATH + '/rightClose.png' : '';
/**
 * Images sureImage.
 */
Format.prototype.sureImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/sure.png' : '';
/**
 * Images addCon.
 */
Format.prototype.addproCon = (!mxClient.IS_SVG) ? IMAGE_PATH + '/add.png' : '';
/**
 * Images addCon.
 */
Format.prototype.titleColImg = (!mxClient.IS_SVG) ? IMAGE_PATH + '/collapsed.gif' : '';
/**
 * Images addCon.
 */
Format.prototype.titleExpImg = (!mxClient.IS_SVG) ? IMAGE_PATH + '/expanded.gif' : '';


/**
 * Returns information about the current selection.
 */
Format.prototype.labelIndex = [0, 0];

/**
 * Returns information about the current selection.
 */
Format.prototype.currentIndex = [0, 0];

/**
 * Adds the label menu items to the given menu and parent.
 */
Format.prototype.init = function()
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;

	this.update = mxUtils.bind(this, function(sender, evt)
	{
		this.clearSelectionState();
		this.refresh();
	});

	graph.getSelectionModel().addListener(mxEvent.CHANGE, this.update);
	graph.addListener(mxEvent.EDITING_STARTED, this.update);
	graph.addListener(mxEvent.EDITING_STOPPED, this.update);
	graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(this, function()
	{
		this.clearSelectionState();
	}));
	graph.addListener(mxEvent.ROOT, mxUtils.bind(this, function()
	{
		this.refresh();
	}));

	this.refresh();
};

/**
 * Returns information about the current selection.
 */
Format.prototype.clearSelectionState = function()
{
	this.selectionState = null;
};

/**
 * Returns information about the current selection.
 */
Format.prototype.getSelectionState = function()
{
	if (this.selectionState == null)
	{
		this.selectionState = this.createSelectionState();
	}

	return this.selectionState;
};

/**
 * Returns information about the current selection.
 */
Format.prototype.createSelectionState = function()
{
	var cells = this.editorUi.editor.graph.getSelectionCells();
	var result = this.initSelectionState();

	for (var i = 0; i < cells.length; i++)
	{
		this.updateSelectionStateForCell(result, cells[i], cells);
	}

	return result;
};

/**
 * Returns information about the current selection.
 */
Format.prototype.initSelectionState = function()
{
	return {vertices: [], edges: [], x: null, y: null, width: null, height: null, style: {},
		containsImage: false, containsLabel: false, fill: true, glass: true, rounded: true,
		comic: true, autoSize: false, image: true, shadow: true};
};

/**
 * Returns information about the current selection.
 */
Format.prototype.updateSelectionStateForCell = function(result, cell, cells)
{
	var graph = this.editorUi.editor.graph;

	if (graph.getModel().isVertex(cell))
	{
		result.vertices.push(cell);
		var geo = graph.getCellGeometry(cell);

		if (geo != null)
		{
			if (geo.width > 0)
			{
				if (result.width == null)
				{
					result.width = geo.width;
				}
				else if (result.width != geo.width)
				{
					result.width = '';
				}
			}
			else
			{
				result.containsLabel = true;
			}

			if (geo.height > 0)
			{
				if (result.height == null)
				{
					result.height = geo.height;
				}
				else if (result.height != geo.height)
				{
					result.height = '';
				}
			}
			else
			{
				result.containsLabel = true;
			}

			if (!geo.relative || geo.offset != null)
			{
				var x = (geo.relative) ? geo.offset.x : geo.x;
				var y = (geo.relative) ? geo.offset.y : geo.y;

				if (result.x == null)
				{
					result.x = x;
				}
				else if (result.x != x)
				{
					result.x = '';
				}

				if (result.y == null)
				{
					result.y = y;
				}
				else if (result.y != y)
				{
					result.y = '';
				}
			}
		}
	}
	else if (graph.getModel().isEdge(cell))
	{
		result.edges.push(cell);
	}

	var state = graph.view.getState(cell);

	if (state != null)
	{
		result.autoSize = result.autoSize || this.isAutoSizeState(state);
		result.glass = result.glass && this.isGlassState(state);
		result.rounded = result.rounded && this.isRoundedState(state);
		result.comic = result.comic && this.isComicState(state);
		result.image = result.image && this.isImageState(state);
		result.shadow = result.shadow && this.isShadowState(state);
		result.fill = result.fill && this.isFillState(state);

		var shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
		result.containsImage = result.containsImage || shape == 'image';

		for (var key in state.style)
		{
			var value = state.style[key];

			if (value != null)
			{
				if (result.style[key] == null)
				{
					result.style[key] = value;
				}
				else if (result.style[key] != value)
				{
					result.style[key] = '';
				}
			}
		}
	}
};

/**
 * Returns information about the current selection.
 */
Format.prototype.isFillState = function(state)
{
	return state.view.graph.model.isVertex(state.cell) ||
		mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'arrow' ||
		mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'flexArrow';
};

/**
 * Returns information about the current selection.
 */
Format.prototype.isGlassState = function(state)
{
	var shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);

	return (shape == 'label' || shape == 'rectangle' || shape == 'internalStorage' ||
			shape == 'ext' || shape == 'umlLifeline' || shape == 'swimlane' ||
			shape == 'process');
};

/**
 * Returns information about the current selection.
 */
Format.prototype.isRoundedState = function(state)
{
	var shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);

	return (shape == 'label' || shape == 'rectangle' || shape == 'internalStorage' || shape == 'corner' ||
			shape == 'parallelogram' || shape == 'swimlane' || shape == 'triangle' || shape == 'trapezoid' ||
			shape == 'ext' || shape == 'step' || shape == 'tee' || shape == 'process' || shape == 'link' ||
			shape == 'rhombus' || shape == 'offPageConnector' || shape == 'loopLimit' || shape == 'hexagon' ||
			shape == 'manualInput' || shape == 'curlyBracket' || shape == 'singleArrow' ||
			shape == 'doubleArrow' || shape == 'flexArrow' || shape == 'card' || shape == 'umlLifeline');
};

/**
 * Returns information about the current selection.
 */
Format.prototype.isComicState = function(state)
{
	var shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);

	return mxUtils.indexOf(['label', 'rectangle', 'internalStorage', 'corner', 'parallelogram', 'note', 'collate',
	                        'swimlane', 'triangle', 'trapezoid', 'ext', 'step', 'tee', 'process', 'link', 'rhombus',
	                        'offPageConnector', 'loopLimit', 'hexagon', 'manualInput', 'singleArrow', 'doubleArrow',
	                        'flexArrow', 'card', 'umlLifeline', 'connector', 'folder', 'component', 'sortShape',
	                        'cross', 'umlFrame', 'cube', 'isoCube', 'isoRectangle'], shape) >= 0;
};

/**
 * Returns information about the current selection.
 */
Format.prototype.isAutoSizeState = function(state)
{
	return mxUtils.getValue(state.style, mxConstants.STYLE_AUTOSIZE, null) == '1';
};

/**
 * Returns information about the current selection.
 */
Format.prototype.isImageState = function(state)
{
	var shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);

	return (shape == 'label' || shape == 'image');
};

/**
 * Returns information about the current selection.
 */
Format.prototype.isShadowState = function(state)
{
	var shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);

	return (shape != 'image');
};

/**
 * Adds the label menu items to the given menu and parent.
 */
Format.prototype.clear = function()
{
	this.container.innerHTML = '';

	// Destroy existing panels
	if (this.panels != null)
	{
		for (var i = 0; i < this.panels.length; i++)
		{
			this.panels[i].destroy();
		}
	}

	this.panels = [];
};

/**
 * Adds the label menu items to the given menu and parent.
 */
Format.prototype.refresh = function()
{
	// Performance tweak: No refresh needed if not visible
	// if (this.container.style.width == '0px')
	// {
	// 	return;
	// }

	this.clear();
	var ui = this.editorUi;
	var graph = ui.editor.graph;

	var div = document.createElement('div');
	div.className = 'formatTabDiv';
	this.container.appendChild(div);
	
	var panel = document.createElement('div');
	panel.className = 'formatPanel';
  
	var label = document.createElement('div');
	label.className = 'formatTab';
	label.style.display = (mxClient.IS_QUIRKS) ? 'inline' : 'inline-block';
	label.style.height = (mxClient.IS_QUIRKS) ? '34px' : '20px';

    var containsLabel = null;
    var currentLabel = null;
    var currentPanel = null;

    var addClickHandler = mxUtils.bind(this, function(elt, panel, arrIndex, index)
    {
        var clickHandler = mxUtils.bind(this, function(evt)
        {
            if (currentLabel != elt)
            {
                if (containsLabel)
                {
                    this.labelIndex[arrIndex] = index;
                }
                else
                {
                    this.currentIndex[arrIndex] = index;
                }

                if (currentLabel != null)
                {
                    currentLabel.className = 'formatTab';
                }

                currentLabel = elt;
                currentLabel.className = 'formatTab codeSelected';

                if (currentPanel != panel)
                {
                    if (currentPanel != null)
                    {
                        currentPanel.style.display = 'none';
                    }

                    currentPanel = panel;
                    currentPanel.style.display = '';
                }
            }
        });

        mxEvent.addListener(elt, 'click', clickHandler);

        if (index == ((containsLabel) ? this.labelIndex[arrIndex] : this.currentIndex[arrIndex]))
        {
            // Invokes handler directly as a workaround for no click on DIV in KHTML.
            clickHandler();
        }
    });

	if (graph.isSelectionEmpty())
	{
        containsLabel = null;
        currentLabel = null;
        currentPanel = null;

        var idx = 0;

        var label1 = label.cloneNode(false);

        // Attribute
        mxUtils.write(label, mxResources.get('attribute'));
        div.appendChild(label);

        var attributePanel = panel.cloneNode(false);
        attributePanel.style.display = 'none';
        this.panels.push(new AttributePanel(this, ui, attributePanel));
        this.container.appendChild(attributePanel);
        addClickHandler(label, attributePanel, 0, idx++);

        // Adds button to hide the format panel since
        // people don't seem to find the toolbar button
        // and the menu item in the format menu
        /*var img = document.createElement('img');
        img.setAttribute('border', '0');
        img.setAttribute('src', Dialog.prototype.closeImage);
        img.setAttribute('title', mxResources.get('hide'));
        img.style.position = 'absolute';
        img.style.display = 'block';
        img.style.right = '0px';
        img.style.top = '8px';
        img.style.cursor = 'pointer';
        img.style.marginTop = '1px';
        img.style.marginRight = '17px';
        img.style.border = '1px solid transparent';
        img.style.padding = '1px';
        img.style.opacity = 0.5;
        label1.appendChild(img);

        mxEvent.addListener(img, 'click', function()
        {
			ui.actions.get('formatPanel').funct();
        });*/

        //diagram
        mxUtils.write(label1, mxResources.get('diagram'));
        div.appendChild(label1);

        var diagramPanel = panel.cloneNode(false);
        diagramPanel.style.display = 'none';
        this.panels.push(new DiagramFormatPanel(this, ui, diagramPanel));
        this.container.appendChild(diagramPanel);
        addClickHandler(label1, diagramPanel, 0, idx++);

	}
	else if (graph.isEditing())
	{
		mxUtils.write(label, mxResources.get('text'));
		div.appendChild(label);
		this.panels.push(new TextFormatPanel(this, ui, panel));
		this.container.appendChild(panel);
	}
	else
	{
		containsLabel = this.getSelectionState().containsLabel;
		currentLabel = null;
		currentPanel = null;

		var idx = 0;

        var label1 = label.cloneNode(false);
		var label2 = label1.cloneNode(false);
		var label3 = label2.cloneNode(false);

        // Attribute
        mxUtils.write(label, mxResources.get('attribute'));
        div.appendChild(label);

        var attributePanel = panel.cloneNode(false);
        attributePanel.style.display = 'none';
        this.panels.push(new AttributePanel(this, ui, attributePanel));
        this.container.appendChild(attributePanel);
        addClickHandler(label, attributePanel, 1, idx++);

		// Style
		if (containsLabel)
		{
			label2.style.borderLeftWidth = '0px';
		}
		else
		{
			label1.style.borderLeftWidth = '0px';
			mxUtils.write(label1, mxResources.get('style'));
			div.appendChild(label1);
			var stylePanel = panel.cloneNode(false);
			stylePanel.style.display = 'none';
			this.panels.push(new StyleFormatPanel(this, ui, stylePanel));
			this.container.appendChild(stylePanel);

			addClickHandler(label1, stylePanel, 1, idx++);
		}

		// Text
		mxUtils.write(label2, mxResources.get('text'));
		div.appendChild(label2);

		var textPanel = panel.cloneNode(false);
		textPanel.style.display = 'none';
		this.panels.push(new TextFormatPanel(this, ui, textPanel));
		this.container.appendChild(textPanel);

		// Arrange
		mxUtils.write(label3, mxResources.get('arrange'));
		div.appendChild(label3);

		var arrangePanel = panel.cloneNode(false);
		arrangePanel.style.display = 'none';
		this.panels.push(new ArrangePanel(this, ui, arrangePanel));
		this.container.appendChild(arrangePanel);

		addClickHandler(label2, textPanel, 1, idx++);
		addClickHandler(label3, arrangePanel, 1, idx++);
	}

    // this.editorUi.actions.get('editData').funct();

};

/**
 * Add the attribute panel.
 */
Format.prototype.createAttributePanel = function()
{
    var div = document.createElement('div');
    div.id = 'attributePanel';
    div.style.whiteSpace = 'nowrap';
    div.style.color = 'rgb(112, 112, 112)';
    div.style.textAlign = 'left';
    div.style.cursor = 'default';
    div.style.width = '100%';
    div.style.position = 'absolute';
    div.style.top = '0';
    div.style.bottom = '0';
    div.style.marginLeft = '5px';
    div.style.backgroundColor = '#FFF';

    var label = document.createElement('div');
    label.style.borderBottom = '1px solid #d9d9d9';
    label.style.textAlign = 'center';
    label.style.fontWeight = 'bold';
    label.style.overflow = 'hidden';
    label.style.display = 'inline-block';
    label.style.paddingTop = '8px';
    label.style.height = '25px';
    label.style.width = '100%';
    label.style.color = '#3a3e55';
    label.style.fontSize = '14px';

    var graph = this.editorUi.editor.graph;
    var cell = graph.getSelectionCell() || graph.getModel().getRoot();
    var title = mxResources.get('attribute');
    if(cell.getId() == '0'){
    	title +=  ' of ' + this.editorUi.interfaceParams.type;
    	label.style.color = '#0000c6';
	}
	else if(cell.getStyle() && cell.getStyle().indexOf('group') >= 0) {
        title +=  ' of group';
    }
    mxUtils.write(label, title);

    // Adds button to hide the format panel since
    // people don't seem to find the toolbar button
    // and the menu item in the format menu
    var img = document.createElement('span');
    img.setAttribute('border', '0');
    img.setAttribute('title', mxResources.get('hide'));
    img.style.position = 'absolute';
    img.style.display = 'block';
    img.style.right = '10px';
    img.style.top = '4px';
    img.style.cursor = 'pointer';
    img.style.opacity = 0.5;
    img.className = 'icon-24 icon-right-arrow';
    label.appendChild(img);

    mxEvent.addListener(img, 'click', function()
    {
        div.style.display = 'none';
    });

    div.appendChild(label);
    return div;
};

/**
 * Base class for format panels.
 */
BaseFormatPanel = function(format, editorUi, container)
{
	this.format = format;
	this.editorUi = editorUi;
	this.container = container;
	this.listeners = [];
};

/**
 * Adds the given color option.
 */
BaseFormatPanel.prototype.getSelectionState = function()
{
	var graph = this.editorUi.editor.graph;
	var cells = graph.getSelectionCells();
	var shape = null;

	for (var i = 0; i < cells.length; i++)
	{
		var state = graph.view.getState(cells[i]);

		if (state != null)
		{
			var tmp = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);

			if (tmp != null)
			{
				if (shape == null)
				{
					shape = tmp;
				}
				else if (shape != tmp)
				{
					return null;
				}
			}

		}
	}

	return shape;
};

/**
 * Install input handler.
 */
BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValue, min, max, unit, textEditFallback, isFloat)
{
	unit = (unit != null) ? unit : '';
	isFloat = (isFloat != null) ? isFloat : false;

	var ui = this.editorUi;
	var graph = ui.editor.graph;

	min = (min != null) ? min : 1;
	max = (max != null) ? max : 999;

	var selState = null;
	var updating = false;

	var update = mxUtils.bind(this, function(evt)
	{
		var value = (isFloat) ? parseFloat(input.value) : parseInt(input.value);

		// Special case: angle mod 360
		if (!isNaN(value) && key == mxConstants.STYLE_ROTATION)
		{
			// Workaround for decimal rounding errors in floats is to
			// use integer and round all numbers to two decimal point
			value = mxUtils.mod(Math.round(value * 100), 36000) / 100;
		}

		value = Math.min(max, Math.max(min, (isNaN(value)) ? defaultValue : value));

		if (graph.cellEditor.isContentEditing() && textEditFallback)
		{
			if (!updating)
			{
				updating = true;

				if (selState != null)
				{
					graph.cellEditor.restoreSelection(selState);
					selState = null;
				}

				textEditFallback(value);
				input.value = value + unit;

				// Restore focus and selection in input
				updating = false;
			}
		}
		else if (value != mxUtils.getValue(this.format.getSelectionState().style, key, defaultValue))
		{
			if (graph.isEditing())
			{
				graph.stopEditing(true);
			}

			graph.getModel().beginUpdate();
			try
			{
				graph.setCellStyles(key, value, graph.getSelectionCells());

				// Handles special case for fontSize where HTML labels are parsed and updated
				if (key == mxConstants.STYLE_FONTSIZE)
				{
					var cells = graph.getSelectionCells();

					for (var i = 0; i < cells.length; i++)
					{
						var cell = cells[i];

						// Changes font tags inside HTML labels
						if (graph.isHtmlLabel(cell))
						{
							var div = document.createElement('div');
							div.innerHTML = graph.convertValueToString(cell);
							var elts = div.getElementsByTagName('font');

							for (var j = 0; j < elts.length; j++)
							{
								elts[j].removeAttribute('size');
								elts[j].style.fontSize = value + 'px';
							}

							graph.cellLabelChanged(cell, div.innerHTML)
						}
					}
				}
			}
			finally
			{
				graph.getModel().endUpdate();
			}

			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [key],
					'values', [value], 'cells', graph.getSelectionCells()));
		}

		input.value = value + unit;
		mxEvent.consume(evt);
	});

	if (textEditFallback && graph.cellEditor.isContentEditing())
	{
		// KNOWN: Arrow up/down clear selection text in quirks/IE 8
		// Text size via arrow button limits to 16 in IE11. Why?
		mxEvent.addListener(input, 'mousedown', function()
		{
			selState = graph.cellEditor.saveSelection();
		});

		mxEvent.addListener(input, 'touchstart', function()
		{
			selState = graph.cellEditor.saveSelection();
		});
	}

	mxEvent.addListener(input, 'change', update);
	mxEvent.addListener(input, 'blur', update);

	return update;
};

/**
 * Adds the given option.
 */
BaseFormatPanel.prototype.createPanel = function()
{
	var div = document.createElement('div');
	div.style.padding = '12px 0px 12px 18px';
	div.style.borderBottom = '1px solid #d9d9d9';

	return div;
};

/**
 * Adds the given option.
 */
BaseFormatPanel.prototype.createTitle = function(title)
{
	var div = document.createElement('div');
	div.style.padding = '0px 0px 6px 0px';
	div.style.whiteSpace = 'nowrap';
	div.style.overflow = 'hidden';
	div.style.width = '200px';
	div.style.fontWeight = 'bold';
	mxUtils.write(div, title);

	return div;
};

/**
 *
 */
BaseFormatPanel.prototype.createStepper = function(input, update, step, height, disableFocus, defaultValue)
{
	step = (step != null) ? step : 1;
	height = (height != null) ? height : 8;

	if (mxClient.IS_QUIRKS)
	{
		height = height - 2;
	}
	else if (mxClient.IS_MT || document.documentMode >= 8)
	{
		height = height + 1;
	}

	var stepper = document.createElement('div');
	mxUtils.setPrefixedStyle(stepper.style, 'borderRadius', '3px');
	stepper.style.border = '1px solid rgb(192, 192, 192)';
	stepper.style.position = 'absolute';

	var up = document.createElement('div');
	up.style.borderBottom = '1px solid rgb(192, 192, 192)';
	up.style.position = 'relative';
	up.style.height = height + 'px';
	up.style.width = '10px';
	up.className = 'geBtnUp';
	stepper.appendChild(up);

	var down = up.cloneNode(false);
	down.style.border = 'none';
	down.style.height = height + 'px';
	down.className = 'geBtnDown';
	stepper.appendChild(down);

	mxEvent.addListener(down, 'click', function(evt)
	{
		if (input.value == '')
		{
			input.value = defaultValue || '2';
		}

		var val = parseInt(input.value);

		if (!isNaN(val))
		{
			input.value = val - step;

			if (update != null)
			{
				update(evt);
			}
		}

		mxEvent.consume(evt);
	});

	mxEvent.addListener(up, 'click', function(evt)
	{
		if (input.value == '')
		{
			input.value = defaultValue || '0';
		}

		var val = parseInt(input.value);

		if (!isNaN(val))
		{
			input.value = val + step;

			if (update != null)
			{
				update(evt);
			}
		}

		mxEvent.consume(evt);
	});

	// Disables transfer of focus to DIV but also :active CSS
	// so it's only used for fontSize where the focus should
	// stay on the selected text, but not for any other input.
	if (disableFocus)
	{
		var currentSelection = null;

		mxEvent.addGestureListeners(stepper,
			function(evt)
			{
				// Workaround for lost current selection in page because of focus in IE
				if (mxClient.IS_QUIRKS || document.documentMode == 8)
				{
					currentSelection = document.selection.createRange();
				}

				mxEvent.consume(evt);
			},
			null,
			function(evt)
			{
				// Workaround for lost current selection in page because of focus in IE
				if (currentSelection != null)
				{
					try
					{
						currentSelection.select();
					}
					catch (e)
					{
						// ignore
					}

					currentSelection = null;
					mxEvent.consume(evt);
				}
			}
		);
	}

	return stepper;
};

/**
 * Adds the given option.
 */
BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setCheckedFn, listener)
{
	var div = document.createElement('div');
	div.style.padding = '6px 0px 1px 0px';
	div.style.whiteSpace = 'nowrap';
	div.style.overflow = 'hidden';
	div.style.width = '200px';
	div.style.height = (mxClient.IS_QUIRKS) ? '27px' : '18px';

	var cb = document.createElement('input');
	cb.setAttribute('type', 'checkbox');
	cb.style.margin = '0px 6px 0px 0px';
	div.appendChild(cb);

	var span = document.createElement('span');
	span.style.position = 'relative';
	span.style.top = '-2px';
	mxUtils.write(span, label);
	div.appendChild(span);

	var applying = false;
	var value = isCheckedFn();

	var apply = function(newValue)
	{
		if (!applying)
		{
			applying = true;

			if (newValue)
			{
				cb.setAttribute('checked', 'checked');
				cb.defaultChecked = true;
				cb.checked = true;
			}
			else
			{
				cb.removeAttribute('checked');
				cb.defaultChecked = false;
				cb.checked = false;
			}

			if (value != newValue)
			{
				value = newValue;

				// Checks if the color value needs to be updated in the model
				if (isCheckedFn() != value)
				{
					setCheckedFn(value);
				}
			}

			applying = false;
		}
	};

	mxEvent.addListener(div, 'click', function(evt)
	{
		// Toggles checkbox state for click on label
		var source = mxEvent.getSource(evt);

		if (source == div || source == span)
		{
			cb.checked = !cb.checked;
		}

		apply(cb.checked);
	});

	apply(value);

	if (listener != null)
	{
		listener.install(apply);
		this.listeners.push(listener);
	}

	return div;
};

/**
 * The string 'null' means use null in values.
 */
BaseFormatPanel.prototype.createCellOption = function(label, key, defaultValue, enabledValue, disabledValue, fn, action, stopEditing)
{
	enabledValue = (enabledValue != null) ? ((enabledValue == 'null') ? null : enabledValue) : '1';
	disabledValue = (disabledValue != null) ? ((disabledValue == 'null') ? null : disabledValue) : '0';

	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;

	return this.createOption(label, function()
	{
		// Seems to be null sometimes, not sure why...
		var state = graph.view.getState(graph.getSelectionCell());

		if (state != null)
		{
			return mxUtils.getValue(state.style, key, defaultValue) != disabledValue;
		}

		return null;
	}, function(checked)
	{
		if (stopEditing)
		{
			graph.stopEditing();
		}

		if (action != null)
		{
			action.funct();
		}
		else
		{
			graph.getModel().beginUpdate();
			try
			{
				var value = (checked) ? enabledValue : disabledValue;
				graph.setCellStyles(key, value, graph.getSelectionCells());

				if (fn != null)
				{
					fn(graph.getSelectionCells(), value);
				}

				ui.fireEvent(new mxEventObject('styleChanged', 'keys', [key],
					'values', [value], 'cells', graph.getSelectionCells()));
			}
			finally
			{
				graph.getModel().endUpdate();
			}
		}
	},
	{
		install: function(apply)
		{
			this.listener = function()
			{
				// Seems to be null sometimes, not sure why...
				var state = graph.view.getState(graph.getSelectionCell());

				if (state != null)
				{
					apply(mxUtils.getValue(state.style, key, defaultValue) != disabledValue);
				}
			};

			graph.getModel().addListener(mxEvent.CHANGE, this.listener);
		},
		destroy: function()
		{
			graph.getModel().removeListener(this.listener);
		}
	});
};

/**
 * Adds the given color option.
 */
BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setColorFn, defaultColor, listener, callbackFn, hideCheckbox)
{
	var div = document.createElement('div');
	div.style.padding = '6px 0px 1px 0px';
	div.style.whiteSpace = 'nowrap';
	div.style.overflow = 'hidden';
	div.style.width = '200px';
	div.style.height = (mxClient.IS_QUIRKS) ? '27px' : '18px';

	var cb = document.createElement('input');
	cb.setAttribute('type', 'checkbox');
	cb.style.margin = '0px 6px 0px 0px';

	if (!hideCheckbox)
	{
		div.appendChild(cb);
	}

	var span = document.createElement('span');
	span.style.position = 'relative';
	span.style.top = '-2px';
	mxUtils.write(span, label);
	div.appendChild(span);

	var applying = false;
	var value = getColorFn();

	var btn = null;

	var apply = function(color, disableUpdate)
	{
		if (!applying)
		{
			applying = true;
			btn.innerHTML = '<div style="width:' + ((mxClient.IS_QUIRKS) ? '30' : '36') +
				'px;height:12px;margin:3px;border:1px solid black;background-color:' +
				((color != null && color != mxConstants.NONE) ? color : defaultColor) + ';"></div>';

			// Fine-tuning in Firefox, quirks mode and IE8 standards
			if (mxClient.IS_MT || mxClient.IS_QUIRKS || document.documentMode == 8)
			{
				btn.firstChild.style.margin = '0px';
			}

			if (color != null && color != mxConstants.NONE)
			{
				cb.setAttribute('checked', 'checked');
				cb.defaultChecked = true;
				cb.checked = true;
			}
			else
			{
				cb.removeAttribute('checked');
				cb.defaultChecked = false;
				cb.checked = false;
			}

			btn.style.display = (cb.checked || hideCheckbox) ? '' : 'none';

			if (callbackFn != null)
			{
				callbackFn(color);
			}

			if (!disableUpdate && (hideCheckbox || value != color))
			{
				value = color;

				// Checks if the color value needs to be updated in the model
				if (hideCheckbox || getColorFn() != value)
				{
					setColorFn(value);
				}
			}

			applying = false;
		}
	};

	btn = mxUtils.button('', mxUtils.bind(this, function(evt)
	{
		this.editorUi.pickColor(value, apply);
		mxEvent.consume(evt);
	}));

	btn.style.position = 'absolute';
	btn.style.marginTop = '-4px';
	btn.style.right = (mxClient.IS_QUIRKS) ? '0px' : '20px';
	btn.style.height = '22px';
	btn.className = 'geColorBtn';
	btn.style.display = (cb.checked || hideCheckbox) ? '' : 'none';
	div.appendChild(btn);

	mxEvent.addListener(div, 'click', function(evt)
	{
		// Toggles checkbox state for click on label
		if (mxEvent.getSource(evt) != cb)
		{
			cb.checked = !cb.checked;
		}

		// Overrides default value with current value to make it easier
		// to restore previous value if the checkbox is clicked twice
		if (!cb.checked && value != null && value != mxConstants.NONE &&
			defaultColor != mxConstants.NONE)
		{
			defaultColor = value;
		}

		apply((cb.checked) ? defaultColor : mxConstants.NONE);
	});

	apply(value, true);

	if (listener != null)
	{
		listener.install(apply);
		this.listeners.push(listener);
	}

	return div;
};

/**
 *
 */
BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defaultColor, callbackFn, setStyleFn)
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;

	return this.createColorOption(label, function()
	{
		// Seems to be null sometimes, not sure why...
		var state = graph.view.getState(graph.getSelectionCell());

		if (state != null)
		{
			return mxUtils.getValue(state.style, colorKey, null);
		}

		return null;
	}, function(color)
	{
		graph.getModel().beginUpdate();
		try
		{
			if (setStyleFn != null)
			{
				setStyleFn(color);
			}

			graph.setCellStyles(colorKey, color, graph.getSelectionCells());
			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [colorKey],
				'values', [color], 'cells', graph.getSelectionCells()));
		}
		finally
		{
			graph.getModel().endUpdate();
		}
	}, defaultColor || mxConstants.NONE,
	{
		install: function(apply)
		{
			this.listener = function()
			{
				// Seems to be null sometimes, not sure why...
				var state = graph.view.getState(graph.getSelectionCell());

				if (state != null)
				{
					apply(mxUtils.getValue(state.style, colorKey, null));
				}
			};

			graph.getModel().addListener(mxEvent.CHANGE, this.listener);
		},
		destroy: function()
		{
			graph.getModel().removeListener(this.listener);
		}
	}, callbackFn);
};

/**
 *
 */
BaseFormatPanel.prototype.addArrow = function(elt, height)
{
	height = (height != null) ? height : 10;

	var arrow = document.createElement('div');
	arrow.style.display = (mxClient.IS_QUIRKS) ? 'inline' : 'inline-block';
	arrow.style.padding = '6px';
	arrow.style.paddingRight = '4px';

	var m = (10 - height);

	if (m == 2)
	{
		arrow.style.paddingTop = 6 + 'px';
	}
	else if (m > 0)
	{
		arrow.style.paddingTop = (6 - m) + 'px';
	}
	else
	{
		arrow.style.marginTop = '-2px';
	}

	arrow.style.height = height + 'px';
	arrow.style.borderLeft = '1px solid #a0a0a0';
	arrow.innerHTML = '<img border="0" src="' + ((mxClient.IS_SVG) ? '' :
		IMAGE_PATH + '/dropdown.png') + '" style="margin-bottom:4px;">';
	mxUtils.setOpacity(arrow, 70);

	var symbol = elt.getElementsByTagName('div')[0];

	if (symbol != null)
	{
		symbol.style.paddingRight = '6px';
		symbol.style.marginLeft = '4px';
		symbol.style.marginTop = '-1px';
		symbol.style.display = (mxClient.IS_QUIRKS) ? 'inline' : 'inline-block';
		mxUtils.setOpacity(symbol, 60);
	}

	mxUtils.setOpacity(elt, 100);
	elt.style.border = '1px solid #a0a0a0';
	elt.style.backgroundColor = 'white';
	elt.style.backgroundImage = 'none';
	elt.style.width = 'auto';
	elt.className += ' geColorBtn';
	mxUtils.setPrefixedStyle(elt.style, 'borderRadius', '3px');

	elt.appendChild(arrow);

	return symbol;
};

/**
 *
 */
BaseFormatPanel.prototype.addUnitInput = function(container, unit, right, width, update, step, marginTop, disableFocus)
{
	marginTop = (marginTop != null) ? marginTop : 0;

	var input = document.createElement('input');
	input.style.position = 'absolute';
	input.style.textAlign = 'right';
	input.style.marginTop = '-2px';
	input.style.right = (right + 12) + 'px';
	input.style.width = width + 'px';
	container.appendChild(input);

	var stepper = this.createStepper(input, update, step, null, disableFocus);
	stepper.style.marginTop = (marginTop - 3) + 'px';
	stepper.style.right = right + 'px';
	container.appendChild(stepper);

	return input;
};

/**
 *
 */
BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, handler, init)
{
	width = (width != null) ? width : 44;

	var graph = this.editorUi.editor.graph;
	var div = this.createPanel();
	div.style.paddingTop = '10px';
	div.style.paddingBottom = '10px';
	mxUtils.write(div, label);
	div.style.fontWeight = 'bold';

	function update(evt)
	{
		if (handler != null)
		{
			handler(input);
		}
		else
		{
			var value = parseInt(input.value);
			value = Math.min(100, Math.max(0, (isNaN(value)) ? 100 : value));
			var state = graph.view.getState(graph.getSelectionCell());

			if (state != null && value != mxUtils.getValue(state.style, key, 100))
			{
				// Removes entry in style (assumes 100 is default for relative values)
				if (value == 100)
				{
					value = null;
				}

				graph.setCellStyles(key, value, graph.getSelectionCells());
			}

			input.value = ((value != null) ? value : '100') + ' %';
		}

		mxEvent.consume(evt);
	};

	var input = this.addUnitInput(div, '%', 20, width, update, 10, -16, handler != null);

	if (key != null)
	{
		var listener = mxUtils.bind(this, function(sender, evt, force)
		{
			if (force || input != document.activeElement)
			{
				var ss = this.format.getSelectionState();
				var tmp = parseInt(mxUtils.getValue(ss.style, key, 100));
				input.value = (isNaN(tmp)) ? '' : tmp + ' %';
			}
		});

		mxEvent.addListener(input, 'keydown', function(e)
		{
			if (e.keyCode == 13)
			{
				graph.container.focus();
				mxEvent.consume(e);
			}
			else if (e.keyCode == 27)
			{
				listener(null, null, true);
				graph.container.focus();
				mxEvent.consume(e);
			}
		});

		graph.getModel().addListener(mxEvent.CHANGE, listener);
		this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }});
		listener();
	}

	mxEvent.addListener(input, 'blur', update);
	mxEvent.addListener(input, 'change', update);

	if (init != null)
	{
		init(input);
	}

	return div;
};

/**
 *
 */
BaseFormatPanel.prototype.addLabel = function(div, title, right, width)
{
	width = (width != null) ? width : 61;

	var label = document.createElement('div');
	mxUtils.write(label, title);
	label.style.position = 'absolute';
	label.style.right = right + 'px';
	label.style.width = width + 'px';
	label.style.marginTop = '6px';
	label.style.textAlign = 'center';
	div.appendChild(label);
};

/**
 *
 */
BaseFormatPanel.prototype.addKeyHandler = function(input, listener)
{
	mxEvent.addListener(input, 'keydown', mxUtils.bind(this, function(e)
	{
		if (e.keyCode == 13)
		{
			this.editorUi.editor.graph.container.focus();
			mxEvent.consume(e);
		}
		else if (e.keyCode == 27)
		{
			if (listener != null)
			{
				listener(null, null, true);
			}

			this.editorUi.editor.graph.container.focus();
			mxEvent.consume(e);
		}
	}));
};

/**
 *
 */
BaseFormatPanel.prototype.styleButtons = function(elts)
{
	for (var i = 0; i < elts.length; i++)
	{
		mxUtils.setPrefixedStyle(elts[i].style, 'borderRadius', '3px');
		mxUtils.setOpacity(elts[i], 100);
		elts[i].style.border = '1px solid #a0a0a0';
		elts[i].style.padding = '4px';
		elts[i].style.paddingTop = '3px';
		elts[i].style.paddingRight = '1px';
		elts[i].style.margin = '1px';
		elts[i].style.width = '24px';
		elts[i].style.height = '20px';
		elts[i].className += ' geColorBtn';
	}
};

/**
 * Adds the label menu items to the given menu and parent.
 */
BaseFormatPanel.prototype.destroy = function()
{
	if (this.listeners != null)
	{
		for (var i = 0; i < this.listeners.length; i++)
		{
			this.listeners[i].destroy();
		}

		this.listeners = null;
	}
};

/**
 * Adds the label menu items to the given menu and parent.
 */
AttributePanel = function(format, editorUi, container)
{
    BaseFormatPanel.call(this, format, editorUi, container);
    this.init();
};

mxUtils.extend(AttributePanel, BaseFormatPanel);

/**
 * Adds the label menu items to the given menu and parent.
 */
ArrangePanel = function(format, editorUi, container)
{
	BaseFormatPanel.call(this, format, editorUi, container);
	this.init();
};

mxUtils.extend(ArrangePanel, BaseFormatPanel);

/**
 * Adds the label menu items to the given menu and parent.
 */
ArrangePanel.prototype.init = function()
{
	var graph = this.editorUi.editor.graph;
	var ss = this.format.getSelectionState();

	this.container.appendChild(this.addLayerOps(this.createPanel()));
	// Special case that adds two panels
	this.addGeometry(this.container);
	this.addEdgeGeometry(this.container);
	this.container.appendChild(this.addAngle(this.createPanel()));

	if (!ss.containsLabel)
	{
		this.container.appendChild(this.addFlip(this.createPanel()));
	}

	if (ss.vertices.length > 1)
	{
		this.container.appendChild(this.addAlign(this.createPanel()));
		this.container.appendChild(this.addDistribute(this.createPanel()));
	}

	this.container.appendChild(this.addGroupOps(this.createPanel()));
};

/**
 *
 */
ArrangePanel.prototype.addLayerOps = function(div)
{
	div.style.padding = '10px 0';
	div.style.textAlign = 'center';
	var ui = this.editorUi;

	var btn = mxUtils.button(mxResources.get('toFront'), function(evt)
	{
		ui.actions.get('toFront').funct();
	})

	btn.setAttribute('title', mxResources.get('toFront') + ' (' + this.editorUi.actions.get('toFront').shortcut + ')');
	btn.style.width = '36%';
	btn.style.height = '22px';
	btn.className = 'geColorBtn';
	div.appendChild(btn);

	var btn = mxUtils.button(mxResources.get('toBack'), function(evt)
	{
		ui.actions.get('toBack').funct();
	})

	btn.setAttribute('title', mxResources.get('toBack') + ' (' + this.editorUi.actions.get('toBack').shortcut + ')');
	btn.style.width = '36%';
	btn.style.height = '22px';
	btn.style.marginLeft = '3%';
	btn.className = 'geColorBtn';
	div.appendChild(btn);

	return div;
};

/**
 *
 */
ArrangePanel.prototype.addGroupOps = function(div)
{
	var ui = this.editorUi;
	var graph = ui.editor.graph;
	var cell = graph.getSelectionCell();
	var ss = this.format.getSelectionState();
	var count = 0;
	
	div.style.padding = '10px 0';
	div.style.textAlign = 'center';

	if (graph.getSelectionCount() > 1)
	{
		btn = mxUtils.button(mxResources.get('group'), function(evt)
		{
			ui.actions.get('group').funct();
		})

		btn.setAttribute('title', mxResources.get('group') + ' (' + this.editorUi.actions.get('group').shortcut + ')');
		btn.style.width = '75%';
		btn.style.marginBottom = '5px';
		btn.style.height = '22px';
		btn.className = 'geColorBtn';
		div.appendChild(btn);
		count++;
	}
	else if (graph.getSelectionCount() == 1 && !graph.getModel().isEdge(cell) && !graph.isSwimlane(cell) &&
			graph.getModel().getChildCount(cell) > 0)
	{
		btn = mxUtils.button(mxResources.get('ungroup'), function(evt)
		{
			ui.actions.get('ungroup').funct();
		})

		btn.setAttribute('title', mxResources.get('ungroup') + ' (' + this.editorUi.actions.get('ungroup').shortcut + ')');
		btn.style.width = '75%';
		btn.style.marginBottom = '5px';
		btn.style.height = '22px';
		btn.className = 'geColorBtn';
		div.appendChild(btn);
		count++;
	}

	if (graph.getSelectionCount() == 1 && graph.getModel().isVertex(cell) &&
   		graph.getModel().isVertex(graph.getModel().getParent(cell)))
	{
		if (count > 0)
		{
			mxUtils.br(div);
		}

		btn = mxUtils.button(mxResources.get('removeFromGroup'), function(evt)
		{
			ui.actions.get('removeFromGroup').funct();
		})

		btn.setAttribute('title', mxResources.get('removeFromGroup'));
		btn.style.width = '75%';
		btn.style.marginBottom = '5px';
		btn.style.height = '22px';
		btn.className = 'geColorBtn';
		div.appendChild(btn);
		count++;
	}
	else if (ss.edges.length > 0)
	{
		if (count > 0)
		{
			mxUtils.br(div);
		}

		btn = mxUtils.button(mxResources.get('clearWaypoints'), mxUtils.bind(this, function(evt)
		{
			this.editorUi.actions.get('clearWaypoints').funct();
		}));

		btn.setAttribute('title', mxResources.get('clearWaypoints'));
		btn.style.width = '75%';
		btn.style.marginBottom = '5px';
		btn.style.height = '22px';
		btn.className = 'geColorBtn';
		div.appendChild(btn);

		count++;
	}

	if (graph.getSelectionCount() == 1)
	{
		if (count > 0)
		{
			mxUtils.br(div);
		}

		// btn = mxUtils.button(mxResources.get('editData'), mxUtils.bind(this, function(evt)
		// {
		// 	this.editorUi.actions.get('editData').funct();
		// }));
		//
		// btn.setAttribute('title', mxResources.get('editData') + ' (' + this.editorUi.actions.get('editData').shortcut + ')');
		// btn.style.width = '40%';
		// btn.style.marginLeft = '9%';
		// btn.style.marginBottom = '2px';
		// div.appendChild(btn);
		// count++;

		btn = mxUtils.button(mxResources.get('editLink'), mxUtils.bind(this, function(evt)
		{
			this.editorUi.actions.get('editLink').funct();
		}));

		btn.setAttribute('title', mxResources.get('editLink'));
		btn.style.width = '75%';
		btn.style.marginBottom = '2px';
		btn.style.height = '22px';
		btn.className = 'geColorBtn';
		div.appendChild(btn);
		count++;
	}

	if (count == 0)
	{
		div.style.display = 'none';
	}

	return div;
};

/**
 *
 */
ArrangePanel.prototype.addAlign = function(div)
{
	var graph = this.editorUi.editor.graph;
	div.style.paddingTop = '6px';
	div.style.paddingBottom = '12px';
	div.appendChild(this.createTitle(mxResources.get('align')));

	var stylePanel = document.createElement('div');
	stylePanel.style.position = 'relative';
	stylePanel.style.paddingLeft = '9%';
	stylePanel.style.borderWidth = '0';
	stylePanel.className = 'geToolbarContainer';

	if (mxClient.IS_QUIRKS)
	{
		div.style.height = '60px';
	}

	var left = this.editorUi.toolbar.addButton('geSprite-alignleft', mxResources.get('left'),
		function() { graph.alignCells(mxConstants.ALIGN_LEFT); }, stylePanel);
	var center = this.editorUi.toolbar.addButton('geSprite-aligncenter', mxResources.get('center'),
		function() { graph.alignCells(mxConstants.ALIGN_CENTER); }, stylePanel);
	var right = this.editorUi.toolbar.addButton('geSprite-alignright', mxResources.get('right'),
		function() { graph.alignCells(mxConstants.ALIGN_RIGHT); }, stylePanel);

	var top = this.editorUi.toolbar.addButton('geSprite-aligntop', mxResources.get('top'),
		function() { graph.alignCells(mxConstants.ALIGN_TOP); }, stylePanel);
	var middle = this.editorUi.toolbar.addButton('geSprite-alignmiddle', mxResources.get('middle'),
		function() { graph.alignCells(mxConstants.ALIGN_MIDDLE); }, stylePanel);
	var bottom = this.editorUi.toolbar.addButton('geSprite-alignbottom', mxResources.get('bottom'),
		function() { graph.alignCells(mxConstants.ALIGN_BOTTOM); }, stylePanel);

	this.styleButtons([left, center, right, top, middle, bottom]);
	right.style.marginRight = '6px';
	div.appendChild(stylePanel);

	return div;
};

/**
 *
 */
ArrangePanel.prototype.addFlip = function(div)
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;
	div.style.padding = '10px 0';
	div.style.textAlign = 'center';

	var span = document.createElement('div');
	span.style.marginBottom = '6px';
	span.style.marginLeft = '18px';
	span.style.fontWeight = 'bold';
	span.style.textAlign = 'left';
	mxUtils.write(span, mxResources.get('flip'));
	div.appendChild(span);

	var btn = mxUtils.button(mxResources.get('horizontal'), function(evt)
	{
		graph.toggleCellStyles(mxConstants.STYLE_FLIPH, false);
	})

	btn.setAttribute('title', mxResources.get('horizontal'));
	btn.style.width = '36%';
	btn.style.height = '22px';
	btn.className = 'geColorBtn';
	div.appendChild(btn);

	var btn = mxUtils.button(mxResources.get('vertical'), function(evt)
	{
		graph.toggleCellStyles(mxConstants.STYLE_FLIPV, false);
	})

	btn.setAttribute('title', mxResources.get('vertical'));
	btn.style.width = '36%';
	btn.style.marginLeft = '3%';
	btn.style.height = '22px';
	btn.className = 'geColorBtn';
	div.appendChild(btn);

	return div;
};

/**
 *
 */
ArrangePanel.prototype.addDistribute = function(div)
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;
	div.style.padding = '10px 0';
	div.style.textAlign = 'center';
	
	var span = document.createElement('div');
	span.style.marginBottom = '6px';
	span.style.marginLeft = '18px';
	span.style.fontWeight = 'bold';
	span.style.textAlign = 'left';
	mxUtils.write(span, mxResources.get('distribute'));
	div.appendChild(span);

	var btn = mxUtils.button(mxResources.get('horizontal'), function(evt)
	{
		graph.distributeCells(true);
	})

	btn.setAttribute('title', mxResources.get('horizontal'));
	btn.style.width = '36%';
	btn.style.height = '22px';
	btn.className = 'geColorBtn';
	div.appendChild(btn);

	var btn = mxUtils.button(mxResources.get('vertical'), function(evt)
	{
		graph.distributeCells(false);
	})

	btn.setAttribute('title', mxResources.get('vertical'));
	btn.style.width = '36%';
	btn.style.marginLeft = '3%';
	btn.style.height = '22px';
	btn.className = 'geColorBtn';
	div.appendChild(btn);

	return div;
};

/**
 *
 */
ArrangePanel.prototype.addAngle = function(div)
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;
	var ss = this.format.getSelectionState();

	div.style.paddingBottom = '28px';

	var span = document.createElement('div');
	span.style.position = 'absolute';
	span.style.width = '70px';
	span.style.marginTop = '0px';
	span.style.fontWeight = 'bold';
	mxUtils.write(span, mxResources.get('angle'));
	div.appendChild(span);

	var update = null;
	var input = this.addUnitInput(div, '°', 84, 44, function()
	{
		update.apply(this, arguments);
	});

	if (!ss.containsLabel)
	{
		var btn = mxUtils.button(mxResources.get('turn'), function(evt)
		{
			ui.actions.get('turn').funct();
		})

		btn.setAttribute('title', mxResources.get('turn') + ' (' + this.editorUi.actions.get('turn').shortcut + ')');
		btn.style.position = 'absolute';
		btn.style.marginTop = '-4px';
		btn.style.right = '20px';
		btn.style.width = '56px';
		btn.style.height = '22px';
		btn.style.fontSize = '12px';
		// btn.className = 'btn-gray';
		btn.className = 'geColorBtn';
		div.appendChild(btn);
	}

	var listener = mxUtils.bind(this, function(sender, evt, force)
	{
		if (force || document.activeElement != input)
		{
			ss = this.format.getSelectionState();
			var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_ROTATION, 0));
			input.value = (isNaN(tmp)) ? '' : tmp  + '°';
		}
	});

	update = this.installInputHandler(input, mxConstants.STYLE_ROTATION, 0, 0, 360, '°', null, true);
	this.addKeyHandler(input, listener);

	graph.getModel().addListener(mxEvent.CHANGE, listener);
	this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }});
	listener();

	return div;
};

/**
 *
 */
ArrangePanel.prototype.addGeometry = function(container)
{
	var ui = this.editorUi;
	var graph = ui.editor.graph;
	var rect = this.format.getSelectionState();

	var div = this.createPanel();
	div.style.paddingBottom = '8px';

	var span = document.createElement('div');
	span.style.position = 'absolute';
	span.style.width = '50px';
	span.style.marginTop = '0px';
	span.style.fontWeight = 'bold';
	mxUtils.write(span, mxResources.get('size'));
	div.appendChild(span);

	var widthUpdate, heightUpdate, leftUpdate, topUpdate;
	var width = this.addUnitInput(div, 'pt', 84, 44, function()
	{
		widthUpdate.apply(this, arguments);
	});
	var height = this.addUnitInput(div, 'pt', 16, 44, function()
	{
		heightUpdate.apply(this, arguments);
	});

	var autosizeBtn = document.createElement('div');
	autosizeBtn.className = 'geSprite geSprite-fit';
	autosizeBtn.setAttribute('title', mxResources.get('autosize') + ' (' + this.editorUi.actions.get('autosize').shortcut + ')');
	autosizeBtn.style.position = 'relative';
	autosizeBtn.style.cursor = 'pointer';
	autosizeBtn.style.marginTop = '-3px';
	autosizeBtn.style.border = '0px';

	// LLLLL调整按钮位置伸缩偏移
	// autosizeBtn.style.left = '52px';
    autosizeBtn.style.left = '32px';
	mxUtils.setOpacity(autosizeBtn, 50);

	mxEvent.addListener(autosizeBtn, 'mouseenter', function()
	{
		mxUtils.setOpacity(autosizeBtn, 100);
	});

	mxEvent.addListener(autosizeBtn, 'mouseleave', function()
	{
		mxUtils.setOpacity(autosizeBtn, 50);
	});

	mxEvent.addListener(autosizeBtn, 'click', function()
	{
		ui.actions.get('autosize').funct();
	});

	div.appendChild(autosizeBtn);
	this.addLabel(div, mxResources.get('width'), 84);
	this.addLabel(div, mxResources.get('height'), 16);
	mxUtils.br(div);

	var wrapper = document.createElement('div');
	wrapper.style.paddingTop = '8px';
	wrapper.style.paddingRight = '20px';
	wrapper.style.whiteSpace = 'nowrap';
	wrapper.style.textAlign = 'right';
	var opt = this.createCellOption(mxResources.get('constrainProportions'),
		mxConstants.STYLE_ASPECT, null, 'fixed', 'null');
	opt.style.width = '100%';
	wrapper.appendChild(opt);
	div.appendChild(wrapper);

	this.addKeyHandler(width, listener);
	this.addKeyHandler(height, listener);

	widthUpdate = this.addGeometryHandler(width, function(geo, value)
	{
		if (geo.width > 0)
		{
			geo.width = Math.max(1, value);
		}
	});
	heightUpdate = this.addGeometryHandler(height, function(geo, value)
	{
		if (geo.height > 0)
		{
			geo.height = Math.max(1, value);
		}
	});

	container.appendChild(div);

	var div2 = this.createPanel();
	div2.style.paddingBottom = '30px';

	var span = document.createElement('div');
	span.style.position = 'absolute';
	span.style.width = '70px';
	span.style.marginTop = '0px';
	span.style.fontWeight = 'bold';
	mxUtils.write(span, mxResources.get('position'));
	div2.appendChild(span);

	var left = this.addUnitInput(div2, 'pt', 84, 44, function()
	{
		leftUpdate.apply(this, arguments);
	});
	var top = this.addUnitInput(div2, 'pt', 16, 44, function()
	{
		topUpdate.apply(this, arguments);
	});

	mxUtils.br(div2);
	this.addLabel(div2, mxResources.get('left'), 84);
	this.addLabel(div2, mxResources.get('top'), 16);
	
	var listener = mxUtils.bind(this, function(sender, evt, force)
	{
		rect = this.format.getSelectionState();

		if (!rect.containsLabel && rect.vertices.length == graph.getSelectionCount() &&
			rect.width != null && rect.height != null)
		{
			div.style.display = '';

			if (force || document.activeElement != width)
			{
				width.value = rect.width + ((rect.width == '') ? '' : ' pt');
			}

			if (force || document.activeElement != height)
			{
				height.value = rect.height + ((rect.height == '') ? '' : ' pt');
			}
		}
		else
		{
			div.style.display = 'none';
		}

		if (rect.vertices.length == graph.getSelectionCount() &&
			rect.x != null && rect.y != null)
		{
			div2.style.display = '';

			if (force || document.activeElement != left)
			{
				left.value = rect.x  + ((rect.x == '') ? '' : ' pt');
			}

			if (force || document.activeElement != top)
			{
				top.value = rect.y + ((rect.y == '') ? '' : ' pt');
			}
		}
		else
		{
			div2.style.display = 'none';
		}
	});

	this.addKeyHandler(left, listener);
	this.addKeyHandler(top, listener);

	graph.getModel().addListener(mxEvent.CHANGE, listener);
	this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }});
	listener();

	leftUpdate = this.addGeometryHandler(left, function(geo, value)
	{
		if (geo.relative)
		{
			geo.offset.x = value;
		}
		else
		{
			geo.x = value;
		}
	});
	topUpdate = this.addGeometryHandler(top, function(geo, value)
	{
		if (geo.relative)
		{
			geo.offset.y = value;
		}
		else
		{
			geo.y = value;
		}
	});

	container.appendChild(div2);
};

/**
 *
 */
ArrangePanel.prototype.addGeometryHandler = function(input, fn)
{
	var ui = this.editorUi;
	var graph = ui.editor.graph;
	var initialValue = null;

	function update(evt)
	{
		if (input.value != '')
		{
			var value = parseFloat(input.value);

			if (value != initialValue)
			{
				graph.getModel().beginUpdate();
				try
				{
					var cells = graph.getSelectionCells();

					for (var i = 0; i < cells.length; i++)
					{
						if (graph.getModel().isVertex(cells[i]))
						{
							var geo = graph.getCellGeometry(cells[i]);

							if (geo != null)
							{
								geo = geo.clone();
								fn(geo, value);

								graph.getModel().setGeometry(cells[i], geo);
							}
						}
					}
				}
				finally
				{
					graph.getModel().endUpdate();
				}

				initialValue = value;
				input.value = value + ' pt';
			}
			else if (isNaN(value))
			{
				input.value = initialValue + ' pt';
			}
		}

		mxEvent.consume(evt);
	};

	mxEvent.addListener(input, 'blur', update);
	mxEvent.addListener(input, 'change', update);
	mxEvent.addListener(input, 'focus', function()
	{
		initialValue = input.value;
	});

	return update;
};

/**
 *
 */
ArrangePanel.prototype.addEdgeGeometry = function(container)
{
	var ui = this.editorUi;
	var graph = ui.editor.graph;
	var rect = this.format.getSelectionState();

	var div = this.createPanel();

	var span = document.createElement('div');
	span.style.position = 'absolute';
	span.style.width = '70px';
	span.style.marginTop = '0px';
	span.style.fontWeight = 'bold';
	mxUtils.write(span, mxResources.get('width'));
	div.appendChild(span);

	var widthUpdate, leftUpdate, topUpdate;
	var width = this.addUnitInput(div, 'pt', 20, 44, function()
	{
		widthUpdate.apply(this, arguments);
	});

	mxUtils.br(div);
	this.addKeyHandler(width, listener);

	function widthUpdate(evt)
	{
		// Maximum stroke width is 999
		var value = parseInt(width.value);
		value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value));

		if (value != mxUtils.getValue(rect.style, 'width', mxCellRenderer.prototype.defaultShapes['flexArrow'].prototype.defaultWidth))
		{
			graph.setCellStyles('width', value, graph.getSelectionCells());
			ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['width'],
					'values', [value], 'cells', graph.getSelectionCells()));
		}

		width.value = value + ' pt';
		mxEvent.consume(evt);
	};

	mxEvent.addListener(width, 'blur', widthUpdate);
	mxEvent.addListener(width, 'change', widthUpdate);

	container.appendChild(div);

	var listener = mxUtils.bind(this, function(sender, evt, force)
	{
		rect = this.format.getSelectionState();

		if (rect.style.shape == 'link' || rect.style.shape == 'flexArrow')
		{
			div.style.display = '';

			if (force || document.activeElement != width)
			{
				var value = mxUtils.getValue(rect.style, 'width',
					mxCellRenderer.prototype.defaultShapes['flexArrow'].prototype.defaultWidth);
				width.value = value + ' pt';
			}
		}
		else
		{
			div.style.display = 'none';
		}
	});

	graph.getModel().addListener(mxEvent.CHANGE, listener);
	this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }});
	listener();
};

/**
 * Adds the label menu items to the given menu and parent.
 */
TextFormatPanel = function(format, editorUi, container)
{
	BaseFormatPanel.call(this, format, editorUi, container);
	this.init();
};

mxUtils.extend(TextFormatPanel, BaseFormatPanel);

/**
 * Adds the label menu items to the given menu and parent.
 */
TextFormatPanel.prototype.init = function()
{
	this.container.style.borderBottom = 'none';
	this.addFont(this.container);
};

/**
 * Adds the label menu items to the given menu and parent.
 */
TextFormatPanel.prototype.addFont = function(container)
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;
	var ss = this.format.getSelectionState();

	var title = this.createTitle(mxResources.get('font'));
	title.style.paddingLeft = '18px';
	title.style.paddingTop = '10px';
	title.style.paddingBottom = '6px';
	container.appendChild(title);

	var stylePanel = this.createPanel();
	stylePanel.style.paddingTop = '2px';
	stylePanel.style.paddingBottom = '2px';
	stylePanel.style.position = 'relative';
	stylePanel.style.marginLeft = '-2px';
	stylePanel.style.borderWidth = '0px';
	stylePanel.className = 'geToolbarContainer';

	if (mxClient.IS_QUIRKS)
	{
		stylePanel.style.display = 'block';
	}

	if (graph.cellEditor.isContentEditing())
	{
		var cssPanel = stylePanel.cloneNode();

		var cssMenu = this.editorUi.toolbar.addMenu(mxResources.get('style'),
			mxResources.get('style'), true, 'formatBlock', cssPanel);
		cssMenu.style.color = 'rgb(112, 112, 112)';
		cssMenu.style.whiteSpace = 'nowrap';
		cssMenu.style.overflow = 'hidden';
		cssMenu.style.margin = '0px';
		this.addArrow(cssMenu);
		cssMenu.style.width = '192px';
		cssMenu.style.height = '15px';

		var arrow = cssMenu.getElementsByTagName('div')[0];
		arrow.style.cssFloat = 'right';
		container.appendChild(cssPanel);
	}

	container.appendChild(stylePanel);

	var colorPanel = this.createPanel();
	colorPanel.style.marginTop = '8px';
	colorPanel.style.borderTop = '1px solid #c0c0c0';
	colorPanel.style.paddingTop = '6px';
	colorPanel.style.paddingBottom = '6px';

	var fontMenu = this.editorUi.toolbar.addMenu('Verdana', mxResources.get('fontFamily'), true, 'fontFamily', stylePanel);
	fontMenu.style.color = 'rgb(112, 112, 112)';
	fontMenu.style.whiteSpace = 'nowrap';
	fontMenu.style.overflow = 'hidden';
	fontMenu.style.margin = '0px';

	this.addArrow(fontMenu);
	fontMenu.style.width = '192px';
	fontMenu.style.height = '15px';

	var stylePanel2 = stylePanel.cloneNode(false);
	stylePanel2.style.marginLeft = '-3px';
	var fontStyleItems = this.editorUi.toolbar.addItems(['bold', 'italic', 'underline'], stylePanel2, true);
	fontStyleItems[0].setAttribute('title', mxResources.get('bold') + ' (' + this.editorUi.actions.get('bold').shortcut + ')');
	fontStyleItems[1].setAttribute('title', mxResources.get('italic') + ' (' + this.editorUi.actions.get('italic').shortcut + ')');
	fontStyleItems[2].setAttribute('title', mxResources.get('underline') + ' (' + this.editorUi.actions.get('underline').shortcut + ')');

	var verticalItem = this.editorUi.toolbar.addItems(['vertical'], stylePanel2, true)[0];

	if (mxClient.IS_QUIRKS)
	{
		mxUtils.br(container);
	}

	container.appendChild(stylePanel2);

	this.styleButtons(fontStyleItems);
	this.styleButtons([verticalItem]);

	var stylePanel3 = stylePanel.cloneNode(false);
	stylePanel3.style.marginLeft = '-3px';
	stylePanel3.style.paddingBottom = '0px';

	var left = this.editorUi.toolbar.addButton('geSprite-left', mxResources.get('left'),
			(graph.cellEditor.isContentEditing()) ?
			function()
			{
				document.execCommand('justifyleft', false, null);
			} : this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_LEFT]), stylePanel3);
	var center = this.editorUi.toolbar.addButton('geSprite-center', mxResources.get('center'),
			(graph.cellEditor.isContentEditing()) ?
			function()
			{
				document.execCommand('justifycenter', false, null);
			} : this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_CENTER]), stylePanel3);
	var right = this.editorUi.toolbar.addButton('geSprite-right', mxResources.get('right'),
			(graph.cellEditor.isContentEditing()) ?
			function()
			{
				document.execCommand('justifyright', false, null);
			} : this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_RIGHT]), stylePanel3);

	this.styleButtons([left, center, right]);

	if (graph.cellEditor.isContentEditing())
	{
		var clear = this.editorUi.toolbar.addButton('geSprite-removeformat', mxResources.get('removeFormat'),
			function()
			{
				document.execCommand('removeformat', false, null);
			}, stylePanel2);
		this.styleButtons([clear]);
	}

	var top = this.editorUi.toolbar.addButton('geSprite-top', mxResources.get('top'),
		this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_TOP]), stylePanel3);
	var middle = this.editorUi.toolbar.addButton('geSprite-middle', mxResources.get('middle'),
		this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_MIDDLE]), stylePanel3);
	var bottom = this.editorUi.toolbar.addButton('geSprite-bottom', mxResources.get('bottom'),
		this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_BOTTOM]), stylePanel3);

	this.styleButtons([top, middle, bottom]);

	if (mxClient.IS_QUIRKS)
	{
		mxUtils.br(container);
	}

	container.appendChild(stylePanel3);

	// Hack for updating UI state below based on current text selection
	// currentTable is the current selected DOM table updated below
	var sub, sup, full, tableWrapper, currentTable, tableCell, tableRow;

	if (graph.cellEditor.isContentEditing())
	{
		top.style.display = 'none';
		middle.style.display = 'none';
		bottom.style.display = 'none';
		verticalItem.style.display = 'none';

		full = this.editorUi.toolbar.addButton('geSprite-justifyfull', null,
			function()
			{
				document.execCommand('justifyfull', false, null);
			}, stylePanel3);
		this.styleButtons([full,
       		sub = this.editorUi.toolbar.addButton('geSprite-subscript', mxResources.get('subscript') + ' (Ctrl+,)',
			function()
			{
				document.execCommand('subscript', false, null);
			}, stylePanel3), sup = this.editorUi.toolbar.addButton('geSprite-superscript', mxResources.get('superscript') + ' (Ctrl+.)',
			function()
			{
				document.execCommand('superscript', false, null);
			}, stylePanel3)]);
		full.style.marginRight = '9px';

		var tmp = stylePanel3.cloneNode(false);
		tmp.style.paddingTop = '4px';
		var btns = [this.editorUi.toolbar.addButton('geSprite-orderedlist', mxResources.get('numberedList'),
				function()
				{
					document.execCommand('insertorderedlist', false, null);
				}, tmp),
			this.editorUi.toolbar.addButton('geSprite-unorderedlist', mxResources.get('bulletedList'),
				function()
				{
					document.execCommand('insertunorderedlist', false, null);
				}, tmp),
			this.editorUi.toolbar.addButton('geSprite-outdent', mxResources.get('decreaseIndent'),
					function()
					{
						document.execCommand('outdent', false, null);
					}, tmp),
			this.editorUi.toolbar.addButton('geSprite-indent', mxResources.get('increaseIndent'),
				function()
				{
					document.execCommand('indent', false, null);
				}, tmp),
			this.editorUi.toolbar.addButton('geSprite-code', mxResources.get('html'),
				function()
				{
					graph.cellEditor.toggleViewMode();
				}, tmp)];
		this.styleButtons(btns);
		btns[btns.length - 1].style.marginLeft = '9px';

		if (mxClient.IS_QUIRKS)
		{
			mxUtils.br(container);
			tmp.style.height = '40';
		}

		container.appendChild(tmp);
	}
	else
	{
		fontStyleItems[2].style.marginRight = '9px';
		right.style.marginRight = '9px';
	}

	// Label position
	var stylePanel4 = stylePanel.cloneNode(false);
	stylePanel4.style.marginLeft = '0px';
	stylePanel4.style.paddingTop = '8px';
	stylePanel4.style.paddingBottom = '4px';
	stylePanel4.style.fontWeight = 'normal';

	mxUtils.write(stylePanel4, mxResources.get('position'));

	// Adds label position options
	var positionSelect = document.createElement('select');
	positionSelect.style.position = 'absolute';
	positionSelect.style.right = '20px';
	positionSelect.style.width = '97px';
	positionSelect.style.marginTop = '-2px';

	var directions = ['topLeft', 'top', 'topRight', 'left', 'center', 'right', 'bottomLeft', 'bottom', 'bottomRight'];
	var lset = {'topLeft': [mxConstants.ALIGN_LEFT, mxConstants.ALIGN_TOP, mxConstants.ALIGN_RIGHT, mxConstants.ALIGN_BOTTOM],
			'top': [mxConstants.ALIGN_CENTER, mxConstants.ALIGN_TOP, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_BOTTOM],
			'topRight': [mxConstants.ALIGN_RIGHT, mxConstants.ALIGN_TOP, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_BOTTOM],
			'left': [mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, mxConstants.ALIGN_RIGHT, mxConstants.ALIGN_MIDDLE],
			'center': [mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE],
			'right': [mxConstants.ALIGN_RIGHT, mxConstants.ALIGN_MIDDLE, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE],
			'bottomLeft': [mxConstants.ALIGN_LEFT, mxConstants.ALIGN_BOTTOM, mxConstants.ALIGN_RIGHT, mxConstants.ALIGN_TOP],
			'bottom': [mxConstants.ALIGN_CENTER, mxConstants.ALIGN_BOTTOM, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_TOP],
			'bottomRight': [mxConstants.ALIGN_RIGHT, mxConstants.ALIGN_BOTTOM, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_TOP]};

	for (var i = 0; i < directions.length; i++)
	{
		var positionOption = document.createElement('option');
		positionOption.setAttribute('value', directions[i]);
		mxUtils.write(positionOption, mxResources.get(directions[i]));
		positionSelect.appendChild(positionOption);
	}

	stylePanel4.appendChild(positionSelect);

	// Writing direction
	var stylePanel5 = stylePanel.cloneNode(false);
	stylePanel5.style.marginLeft = '0px';
	stylePanel5.style.paddingTop = '4px';
	stylePanel5.style.paddingBottom = '4px';
	stylePanel5.style.fontWeight = 'normal';

	mxUtils.write(stylePanel5, mxResources.get('writingDirection'));

	// Adds writing direction options
	// LATER: Handle reselect of same option in all selects (change event
	// is not fired for same option so have opened state on click) and
	// handle multiple different styles for current selection
	var dirSelect = document.createElement('select');
	dirSelect.style.position = 'absolute';
	dirSelect.style.right = '20px';
	dirSelect.style.width = '97px';
	dirSelect.style.marginTop = '-2px';

	// NOTE: For automatic we use the value null since automatic
	// requires the text to be non formatted and non-wrappedto
	var dirs = ['automatic', 'leftToRight', 'rightToLeft'];
	var dirSet = {'automatic': null,
			'leftToRight': mxConstants.TEXT_DIRECTION_LTR,
			'rightToLeft': mxConstants.TEXT_DIRECTION_RTL};

	for (var i = 0; i < dirs.length; i++)
	{
		var dirOption = document.createElement('option');
		dirOption.setAttribute('value', dirs[i]);
		mxUtils.write(dirOption, mxResources.get(dirs[i]));
		dirSelect.appendChild(dirOption);
	}

	stylePanel5.appendChild(dirSelect);

	if (!graph.isEditing())
	{
		container.appendChild(stylePanel4);

		mxEvent.addListener(positionSelect, 'change', function(evt)
		{
			graph.getModel().beginUpdate();
			try
			{
				var vals = lset[positionSelect.value];

				if (vals != null)
				{
					graph.setCellStyles(mxConstants.STYLE_LABEL_POSITION, vals[0], graph.getSelectionCells());
					graph.setCellStyles(mxConstants.STYLE_VERTICAL_LABEL_POSITION, vals[1], graph.getSelectionCells());
					graph.setCellStyles(mxConstants.STYLE_ALIGN, vals[2], graph.getSelectionCells());
					graph.setCellStyles(mxConstants.STYLE_VERTICAL_ALIGN, vals[3], graph.getSelectionCells());
				}
			}
			finally
			{
				graph.getModel().endUpdate();
			}

			mxEvent.consume(evt);
		});

		// LATER: Update dir in text editor while editing and update style with label
		// NOTE: The tricky part is handling and passing on the auto value
		container.appendChild(stylePanel5);

		mxEvent.addListener(dirSelect, 'change', function(evt)
		{
			graph.setCellStyles(mxConstants.STYLE_TEXT_DIRECTION, dirSet[dirSelect.value], graph.getSelectionCells());
			mxEvent.consume(evt);
		});
	}

	// Font size
	var input = document.createElement('input');
	input.style.textAlign = 'right';
	input.style.marginTop = '4px';

	if (!mxClient.IS_QUIRKS)
	{
		input.style.position = 'absolute';
		//PPPPP元素属性字体input框
		input.style.right = '32px';
	}

	input.style.width = '46px';
	input.style.height = (mxClient.IS_QUIRKS) ? '21px' : '17px';
	stylePanel2.appendChild(input);

	// Workaround for font size 4 if no text is selected is update font size below
	// after first character was entered (as the font element is lazy created)
	var pendingFontSize = null;

	var inputUpdate = this.installInputHandler(input, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize, 1, 999, ' pt',
	function(fontsize)
	{
		pendingFontSize = fontsize;

		// Workaround for can't set font size in px is to change font size afterwards
		document.execCommand('fontSize', false, '4');
		var elts = graph.cellEditor.textarea.getElementsByTagName('font');

		for (var i = 0; i < elts.length; i++)
		{
			if (elts[i].getAttribute('size') == '4')
			{
				elts[i].removeAttribute('size');
				elts[i].style.fontSize = pendingFontSize + 'px';

				// Overrides fontSize in input with the one just assigned as a workaround
				// for potential fontSize values of parent elements that don't match
				window.setTimeout(function()
				{
					input.value = pendingFontSize + ' pt';
					pendingFontSize = null;
				}, 0);

				break;
			}
		}
	}, true);

	var stepper = this.createStepper(input, inputUpdate, 1, 10, true, Menus.prototype.defaultFontSize);
	stepper.style.display = input.style.display;
	stepper.style.marginTop = '2px';
	
	if (!mxClient.IS_QUIRKS)
	{
		// PPPPP上下字体大小
		stepper.style.right = '20px';
	}

	stylePanel2.appendChild(stepper);

	var arrow = fontMenu.getElementsByTagName('div')[0];
	arrow.style.cssFloat = 'right';

	var bgColorApply = null;
	var currentBgColor = '#ffffff';

	var fontColorApply = null;
	var currentFontColor = '#000000';

	var bgPanel = (graph.cellEditor.isContentEditing()) ? this.createColorOption(mxResources.get('backgroundColor'), function()
	{
		return currentBgColor;
	}, function(color)
	{
		document.execCommand('backcolor', false, (color != mxConstants.NONE) ? color : 'transparent');
	}, '#ffffff',
	{
		install: function(apply) { bgColorApply = apply; },
		destroy: function() { bgColorApply = null; }
	}, null, true) : this.createCellColorOption(mxResources.get('backgroundColor'), mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, '#ffffff');
	bgPanel.style.fontWeight = 'bold';

	var borderPanel = this.createCellColorOption(mxResources.get('borderColor'), mxConstants.STYLE_LABEL_BORDERCOLOR, '#000000');
	borderPanel.style.fontWeight = 'bold';

	var panel = (graph.cellEditor.isContentEditing()) ? this.createColorOption(mxResources.get('fontColor'), function()
	{
		return currentFontColor;
	}, function(color)
	{
		document.execCommand('forecolor', false, (color != mxConstants.NONE) ? color : 'transparent');
	}, '#000000',
	{
		install: function(apply) { fontColorApply = apply; },
		destroy: function() { fontColorApply = null; }
	}, null, true) : this.createCellColorOption(mxResources.get('fontColor'), mxConstants.STYLE_FONTCOLOR, '#000000', function(color)
	{
		if (color == null || color == mxConstants.NONE)
		{
			bgPanel.style.display = 'none';
		}
		else
		{
			bgPanel.style.display = '';
		}

		borderPanel.style.display = bgPanel.style.display;
	}, function(color)
	{
		if (color == null || color == mxConstants.NONE)
		{
			graph.setCellStyles(mxConstants.STYLE_NOLABEL, '1', graph.getSelectionCells());
		}
		else
		{
			graph.setCellStyles(mxConstants.STYLE_NOLABEL, null, graph.getSelectionCells());
		}
	});
	panel.style.fontWeight = 'bold';

	colorPanel.appendChild(panel);
	colorPanel.appendChild(bgPanel);

	if (!graph.cellEditor.isContentEditing())
	{
		colorPanel.appendChild(borderPanel);
	}

	container.appendChild(colorPanel);

	var extraPanel = this.createPanel();
	extraPanel.style.paddingTop = '2px';
	extraPanel.style.paddingBottom = '4px';

	// LATER: Fix toggle using '' instead of 'null'
	var wwOpt = this.createCellOption(mxResources.get('wordWrap'), mxConstants.STYLE_WHITE_SPACE, null, 'wrap', 'null', null, null, true);
	wwOpt.style.fontWeight = 'bold';

	// Word wrap in edge labels only supported via labelWidth style
	if (!ss.containsLabel && !ss.autoSize && ss.edges.length == 0)
	{
		extraPanel.appendChild(wwOpt);
	}

	// Delegates switch of style to formattedText action as it also convertes newlines
	var htmlOpt = this.createCellOption(mxResources.get('formattedText'), 'html', '0',
		null, null, null, ui.actions.get('formattedText'));
	htmlOpt.style.fontWeight = 'bold';
	extraPanel.appendChild(htmlOpt);

	var spacingPanel = this.createPanel();
	spacingPanel.style.paddingTop = '10px';
	spacingPanel.style.paddingBottom = '28px';
	spacingPanel.style.fontWeight = 'normal';

	var span = document.createElement('div');
	span.style.position = 'absolute';
	span.style.width = '70px';
	span.style.marginTop = '0px';
	span.style.fontWeight = 'bold';
	mxUtils.write(span, mxResources.get('spacing'));
	spacingPanel.appendChild(span);

	var topUpdate, globalUpdate, leftUpdate, bottomUpdate, rightUpdate;
	var topSpacing = this.addUnitInput(spacingPanel, 'pt', 91, 44, function()
	{
		topUpdate.apply(this, arguments);
	});
	var globalSpacing = this.addUnitInput(spacingPanel, 'pt', 20, 44, function()
	{
		globalUpdate.apply(this, arguments);
	});

	mxUtils.br(spacingPanel);
	this.addLabel(spacingPanel, mxResources.get('top'), 91);
	this.addLabel(spacingPanel, mxResources.get('global'), 20);
	mxUtils.br(spacingPanel);
	mxUtils.br(spacingPanel);

	var leftSpacing = this.addUnitInput(spacingPanel, 'pt', 162, 44, function()
	{
		leftUpdate.apply(this, arguments);
	});
	var bottomSpacing = this.addUnitInput(spacingPanel, 'pt', 91, 44, function()
	{
		bottomUpdate.apply(this, arguments);
	});
	var rightSpacing = this.addUnitInput(spacingPanel, 'pt', 20, 44, function()
	{
		rightUpdate.apply(this, arguments);
	});

	mxUtils.br(spacingPanel);
	this.addLabel(spacingPanel, mxResources.get('left'), 162);
	this.addLabel(spacingPanel, mxResources.get('bottom'), 91);
	this.addLabel(spacingPanel, mxResources.get('right'), 20);

	if (!graph.cellEditor.isContentEditing())
	{
		container.appendChild(extraPanel);
		container.appendChild(this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_TEXT_OPACITY));
		container.appendChild(spacingPanel);
	}
	else
	{
		var selState = null;
		var lineHeightInput = null;

		container.appendChild(this.createRelativeOption(mxResources.get('lineheight'), null, null, function(input)
		{
			var value = (input.value == '') ? 120 : parseInt(input.value);
			value = Math.max(120, (isNaN(value)) ? 120 : value);

			if (selState != null)
			{
				graph.cellEditor.restoreSelection(selState);
				selState = null;
			}

			var selectedElement = graph.getSelectedElement();
			var node = selectedElement;

			while (node != null && node.nodeType != mxConstants.NODETYPE_ELEMENT)
			{
				node = node.parentNode;
			}

			if (node == graph.cellEditor.textarea && graph.cellEditor.textarea.firstChild != null)
			{
				if (graph.cellEditor.textarea.firstChild.nodeName != 'FONT')
				{
					graph.cellEditor.textarea.innerHTML = '<font>' + graph.cellEditor.textarea.innerHTML + '</font>';
				}

				node = graph.cellEditor.textarea.firstChild;
			}

			if (node != null && node != graph.cellEditor.textarea)
			{
				node.style.lineHeight = value + '%';
			}

			input.value = value + ' %';
		}, function(input)
		{
			// Used in CSS handler to update current value
			lineHeightInput = input;

			// KNOWN: Arrow up/down clear selection text in quirks/IE 8
			// Text size via arrow button limits to 16 in IE11. Why?
			mxEvent.addListener(input, 'mousedown', function()
			{
				selState = graph.cellEditor.saveSelection();
			});

			mxEvent.addListener(input, 'touchstart', function()
			{
				selState = graph.cellEditor.saveSelection();
			});

			input.value = '120 %';
		}));

		var insertPanel = stylePanel.cloneNode(false);
		insertPanel.style.paddingLeft = '0px';
		var insertBtns = this.editorUi.toolbar.addItems(['link', 'image'], insertPanel, true);

		var btns = [
		        this.editorUi.toolbar.addButton('geSprite-horizontalrule', mxResources.get('insertHorizontalRule'),
				function()
				{
					document.execCommand('inserthorizontalrule', false, null);
				}, insertPanel),
				this.editorUi.toolbar.addMenuFunctionInContainer(insertPanel, 'geSprite-table', mxResources.get('table'), false, mxUtils.bind(this, function(menu)
				{
					this.editorUi.menus.addInsertTableItem(menu);
				}))];
		this.styleButtons(insertBtns);
		this.styleButtons(btns);

		var wrapper2 = this.createPanel();
		wrapper2.style.paddingTop = '10px';
		wrapper2.style.paddingBottom = '10px';
		wrapper2.appendChild(this.createTitle(mxResources.get('insert')));
		wrapper2.appendChild(insertPanel);
		container.appendChild(wrapper2);

		if (mxClient.IS_QUIRKS)
		{
			wrapper2.style.height = '70';
		}

		var tablePanel = stylePanel.cloneNode(false);
		tablePanel.style.paddingLeft = '0px';

		var btns = [
		        this.editorUi.toolbar.addButton('geSprite-insertcolumnbefore', mxResources.get('insertColumnBefore'),
				function()
				{
					try
					{
			        	if (currentTable != null)
			        	{
			        		graph.selectNode(graph.insertColumn(currentTable, (tableCell != null) ? tableCell.cellIndex : 0));
			        	}
					}
					catch (e)
					{
						alert(e);
					}
				}, tablePanel),
				this.editorUi.toolbar.addButton('geSprite-insertcolumnafter', mxResources.get('insertColumnAfter'),
				function()
				{
					try
					{
						if (currentTable != null)
			        	{
							graph.selectNode(graph.insertColumn(currentTable, (tableCell != null) ? tableCell.cellIndex + 1 : -1));
			        	}
					}
					catch (e)
					{
						alert(e);
					}
				}, tablePanel),
				this.editorUi.toolbar.addButton('geSprite-deletecolumn', mxResources.get('deleteColumn'),
				function()
				{
					try
					{
						if (currentTable != null && tableCell != null)
						{
							graph.deleteColumn(currentTable, tableCell.cellIndex);
						}
					}
					catch (e)
					{
						alert(e);
					}
				}, tablePanel),
				this.editorUi.toolbar.addButton('geSprite-insertrowbefore', mxResources.get('insertRowBefore'),
				function()
				{
					try
					{
						if (currentTable != null && tableRow != null)
						{
							graph.selectNode(graph.insertRow(currentTable, tableRow.sectionRowIndex));
						}
					}
					catch (e)
					{
						alert(e);
					}
				}, tablePanel),
				this.editorUi.toolbar.addButton('geSprite-insertrowafter', mxResources.get('insertRowAfter'),
				function()
				{
					try
					{
						if (currentTable != null && tableRow != null)
						{
							graph.selectNode(graph.insertRow(currentTable, tableRow.sectionRowIndex + 1));
						}
					}
					catch (e)
					{
						alert(e);
					}
				}, tablePanel),
				this.editorUi.toolbar.addButton('geSprite-deleterow', mxResources.get('deleteRow'),
				function()
				{
					try
					{
						if (currentTable != null && tableRow != null)
						{
							graph.deleteRow(currentTable, tableRow.sectionRowIndex);
						}
					}
					catch (e)
					{
						alert(e);
					}
				}, tablePanel)];
		this.styleButtons(btns);
		btns[2].style.marginRight = '9px';

		var wrapper3 = this.createPanel();
		wrapper3.style.paddingTop = '10px';
		wrapper3.style.paddingBottom = '10px';
		wrapper3.appendChild(this.createTitle(mxResources.get('table')));
		wrapper3.appendChild(tablePanel);

		if (mxClient.IS_QUIRKS)
		{
			mxUtils.br(container);
			wrapper3.style.height = '70';
		}

		var tablePanel2 = stylePanel.cloneNode(false);
		tablePanel2.style.paddingLeft = '0px';

		var btns = [
		        this.editorUi.toolbar.addButton('geSprite-strokecolor', mxResources.get('borderColor'),
				mxUtils.bind(this, function()
				{
					if (currentTable != null)
					{
						// Converts rgb(r,g,b) values
						var color = currentTable.style.borderColor.replace(
							    /\brgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g,
							    function($0, $1, $2, $3) {
							        return "#" + ("0"+Number($1).toString(16)).substr(-2) + ("0"+Number($2).toString(16)).substr(-2) + ("0"+Number($3).toString(16)).substr(-2);
							    });
						this.editorUi.pickColor(color, function(newColor)
						{
							if (newColor == null || newColor == mxConstants.NONE)
							{
								currentTable.removeAttribute('border');
								currentTable.style.border = '';
								currentTable.style.borderCollapse = '';
							}
							else
							{
								currentTable.setAttribute('border', '1');
								currentTable.style.border = '1px solid ' + newColor;
								currentTable.style.borderCollapse = 'collapse';
							}
						});
					}
				}), tablePanel2),
				this.editorUi.toolbar.addButton('geSprite-fillcolor', mxResources.get('backgroundColor'),
				mxUtils.bind(this, function()
				{
					// Converts rgb(r,g,b) values
					if (currentTable != null)
					{
						var color = currentTable.style.backgroundColor.replace(
							    /\brgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g,
							    function($0, $1, $2, $3) {
							        return "#" + ("0"+Number($1).toString(16)).substr(-2) + ("0"+Number($2).toString(16)).substr(-2) + ("0"+Number($3).toString(16)).substr(-2);
							    });
						this.editorUi.pickColor(color, function(newColor)
						{
							if (newColor == null || newColor == mxConstants.NONE)
							{
								currentTable.style.backgroundColor = '';
							}
							else
							{
								currentTable.style.backgroundColor = newColor;
							}
						});
					}
				}), tablePanel2),
				this.editorUi.toolbar.addButton('geSprite-fit', mxResources.get('spacing'),
				function()
				{
					if (currentTable != null)
					{
						var value = currentTable.getAttribute('cellPadding') || 0;

						var dlg = new FilenameDialog(ui, value, mxResources.get('apply'), mxUtils.bind(this, function(newValue)
						{
							if (newValue != null && newValue.length > 0)
							{
								currentTable.setAttribute('cellPadding', newValue);
							}
							else
							{
								currentTable.removeAttribute('cellPadding');
							}
						}), mxResources.get('spacing'));
						ui.showDialog(dlg.container, 300, 80, true, true);
						dlg.init();
					}
				}, tablePanel2),
				this.editorUi.toolbar.addButton('geSprite-left', mxResources.get('left'),
				function()
				{
					if (currentTable != null)
					{
						currentTable.setAttribute('align', 'left');
					}
				}, tablePanel2),
				this.editorUi.toolbar.addButton('geSprite-center', mxResources.get('center'),
				function()
				{
					if (currentTable != null)
					{
						currentTable.setAttribute('align', 'center');
					}
				}, tablePanel2),
				this.editorUi.toolbar.addButton('geSprite-right', mxResources.get('right'),
				function()
				{
					if (currentTable != null)
					{
						currentTable.setAttribute('align', 'right');
					}
				}, tablePanel2)];
		this.styleButtons(btns);
		btns[2].style.marginRight = '9px';

		if (mxClient.IS_QUIRKS)
		{
			mxUtils.br(wrapper3);
			mxUtils.br(wrapper3);
		}

		wrapper3.appendChild(tablePanel2);
		container.appendChild(wrapper3);

		tableWrapper = wrapper3;
	}

	function setSelected(elt, selected)
	{
		if (mxClient.IS_IE && (mxClient.IS_QUIRKS || document.documentMode < 10))
		{
			elt.style.filter = (selected) ? 'progid:DXImageTransform.Microsoft.Gradient('+
            	'StartColorStr=\'#c5ecff\', EndColorStr=\'#87d4fb\', GradientType=0)' : '';
		}
		else
		{
			elt.style.backgroundImage = (selected) ? 'linear-gradient(#c5ecff 0px,#87d4fb 100%)' : '';
		}
	};

	var listener = mxUtils.bind(this, function(sender, evt, force)
	{
		ss = this.format.getSelectionState();
		var fontStyle = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSTYLE, 0);
		setSelected(fontStyleItems[0], (fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD);
		setSelected(fontStyleItems[1], (fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC);
		setSelected(fontStyleItems[2], (fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE);
		fontMenu.firstChild.nodeValue = mxUtils.htmlEntities(mxUtils.getValue(ss.style, mxConstants.STYLE_FONTFAMILY, Menus.prototype.defaultFont));

		setSelected(verticalItem, mxUtils.getValue(ss.style, mxConstants.STYLE_HORIZONTAL, '1') == '0');

		if (force || document.activeElement != input)
		{
			var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize));
			input.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
		}

		var align = mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER);
		setSelected(left, align == mxConstants.ALIGN_LEFT);
		setSelected(center, align == mxConstants.ALIGN_CENTER);
		setSelected(right, align == mxConstants.ALIGN_RIGHT);

		var valign = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
		setSelected(top, valign == mxConstants.ALIGN_TOP);
		setSelected(middle, valign == mxConstants.ALIGN_MIDDLE);
		setSelected(bottom, valign == mxConstants.ALIGN_BOTTOM);

		var pos = mxUtils.getValue(ss.style, mxConstants.STYLE_LABEL_POSITION, mxConstants.ALIGN_CENTER);
		var vpos =  mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE);

		if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_TOP)
		{
			positionSelect.value = 'topLeft';
		}
		else if (pos == mxConstants.ALIGN_CENTER && vpos == mxConstants.ALIGN_TOP)
		{
			positionSelect.value = 'top';
		}
		else if (pos == mxConstants.ALIGN_RIGHT && vpos == mxConstants.ALIGN_TOP)
		{
			positionSelect.value = 'topRight';
		}
		else if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_BOTTOM)
		{
			positionSelect.value = 'bottomLeft';
		}
		else if (pos == mxConstants.ALIGN_CENTER && vpos == mxConstants.ALIGN_BOTTOM)
		{
			positionSelect.value = 'bottom';
		}
		else if (pos == mxConstants.ALIGN_RIGHT && vpos == mxConstants.ALIGN_BOTTOM)
		{
			positionSelect.value = 'bottomRight';
		}
		else if (pos == mxConstants.ALIGN_LEFT)
		{
			positionSelect.value = 'left';
		}
		else if (pos == mxConstants.ALIGN_RIGHT)
		{
			positionSelect.value = 'right';
		}
		else
		{
			positionSelect.value = 'center';
		}

		var dir = mxUtils.getValue(ss.style, mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION);

		if (dir == mxConstants.TEXT_DIRECTION_RTL)
		{
			dirSelect.value = 'rightToLeft';
		}
		else if (dir == mxConstants.TEXT_DIRECTION_LTR)
		{
			dirSelect.value = 'leftToRight';
		}
		else if (dir == mxConstants.TEXT_DIRECTION_AUTO)
		{
			dirSelect.value = 'automatic';
		}

		if (force || document.activeElement != globalSpacing)
		{
			var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING, 2));
			globalSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
		}

		if (force || document.activeElement != topSpacing)
		{
			var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_TOP, 0));
			topSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
		}

		if (force || document.activeElement != rightSpacing)
		{
			var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_RIGHT, 0));
			rightSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
		}

		if (force || document.activeElement != bottomSpacing)
		{
			var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_BOTTOM, 0));
			bottomSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
		}

		if (force || document.activeElement != leftSpacing)
		{
			var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_LEFT, 0));
			leftSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
		}
	});

	globalUpdate = this.installInputHandler(globalSpacing, mxConstants.STYLE_SPACING, 2, -999, 999, ' pt');
	topUpdate = this.installInputHandler(topSpacing, mxConstants.STYLE_SPACING_TOP, 0, -999, 999, ' pt');
	rightUpdate = this.installInputHandler(rightSpacing, mxConstants.STYLE_SPACING_RIGHT, 0, -999, 999, ' pt');
	bottomUpdate = this.installInputHandler(bottomSpacing, mxConstants.STYLE_SPACING_BOTTOM, 0, -999, 999, ' pt');
	leftUpdate = this.installInputHandler(leftSpacing, mxConstants.STYLE_SPACING_LEFT, 0, -999, 999, ' pt');

	this.addKeyHandler(input, listener);
	this.addKeyHandler(globalSpacing, listener);
	this.addKeyHandler(topSpacing, listener);
	this.addKeyHandler(rightSpacing, listener);
	this.addKeyHandler(bottomSpacing, listener);
	this.addKeyHandler(leftSpacing, listener);

	graph.getModel().addListener(mxEvent.CHANGE, listener);
	this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }});
	listener();

	if (graph.cellEditor.isContentEditing())
	{
		var updating = false;

		var updateCssHandler = function()
		{
			if (!updating)
			{
				updating = true;

				window.setTimeout(function()
				{
					var selectedElement = graph.getSelectedElement();
					var node = selectedElement;

					while (node != null && node.nodeType != mxConstants.NODETYPE_ELEMENT)
					{
						node = node.parentNode;
					}

					if (node != null)
					{
						var css = mxUtils.getCurrentStyle(node);

						if (css != null)
						{
							setSelected(fontStyleItems[0], css.fontWeight == 'bold' || graph.getParentByName(node, 'B', graph.cellEditor.textarea) != null);
							setSelected(fontStyleItems[1], css.fontStyle == 'italic' || graph.getParentByName(node, 'I', graph.cellEditor.textarea) != null);
							setSelected(fontStyleItems[2], graph.getParentByName(node, 'U', graph.cellEditor.textarea) != null);
							setSelected(left, css.textAlign == 'left');
							setSelected(center, css.textAlign == 'center');
							setSelected(right, css.textAlign == 'right');
							setSelected(full, css.textAlign == 'justify');
							setSelected(sup, graph.getParentByName(node, 'SUP', graph.cellEditor.textarea) != null);
							setSelected(sub, graph.getParentByName(node, 'SUB', graph.cellEditor.textarea) != null);

							currentTable = graph.getParentByName(node, 'TABLE', graph.cellEditor.textarea);
							tableRow = (currentTable == null) ? null : graph.getParentByName(node, 'TR', currentTable);
							tableCell = (currentTable == null) ? null : graph.getParentByName(node, 'TD', currentTable);
							tableWrapper.style.display = (currentTable != null) ? '' : 'none';

							if (document.activeElement != input)
							{
								if (node.nodeName == 'FONT' && node.getAttribute('size') == '4' &&
									pendingFontSize != null)
								{
									node.removeAttribute('size');
									node.style.fontSize = pendingFontSize + 'px';
									pendingFontSize = null;
								}
								else
								{
									input.value = parseFloat(css.fontSize) + ' pt';
								}

								var tmp = node.style.lineHeight || css.lineHeight;
								var lh = parseFloat(tmp);

								if (tmp.substring(tmp.length - 2) == 'px')
								{
									lh = lh / parseFloat(css.fontSize);
								}

								if (tmp.substring(tmp.length - 1) != '%')
								{
									lh *= 100;
								}

								lineHeightInput.value = lh + ' %';
							}

							// Converts rgb(r,g,b) values
							var color = css.color.replace(
								    /\brgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g,
								    function($0, $1, $2, $3) {
								        return "#" + ("0"+Number($1).toString(16)).substr(-2) + ("0"+Number($2).toString(16)).substr(-2) + ("0"+Number($3).toString(16)).substr(-2);
								    });
							var color2 = css.backgroundColor.replace(
								    /\brgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g,
								    function($0, $1, $2, $3) {
								        return "#" + ("0"+Number($1).toString(16)).substr(-2) + ("0"+Number($2).toString(16)).substr(-2) + ("0"+Number($3).toString(16)).substr(-2);
								    });

							// Updates the color picker for the current font
							if (fontColorApply != null)
							{
								if (color.charAt(0) == '#')
								{
									currentFontColor = color;
								}
								else
								{
									currentFontColor = '#000000';
								}

								fontColorApply(currentFontColor, true);
							}

							if (bgColorApply != null)
							{
								if (color2.charAt(0) == '#')
								{
									currentBgColor = color2;
								}
								else
								{
									currentBgColor = null;
								}

								bgColorApply(currentBgColor, true);
							}

							// Workaround for firstChild is null or not an object
							// in the log which seems to be IE8- only / 29.01.15
							if (fontMenu.firstChild != null)
							{
								// Strips leading and trailing quotes
								var ff = css.fontFamily;

								if (ff.charAt(0) == '\'')
								{
									ff = ff.substring(1);
								}

								if (ff.charAt(ff.length - 1) == '\'')
								{
									ff = ff.substring(0, ff.length - 1);
								}

								fontMenu.firstChild.nodeValue = ff;
							}
						}
					}

					updating = false;
				}, 0);
			}
		};

		mxEvent.addListener(graph.cellEditor.textarea, 'input', updateCssHandler)
		mxEvent.addListener(graph.cellEditor.textarea, 'touchend', updateCssHandler);
		mxEvent.addListener(graph.cellEditor.textarea, 'mouseup', updateCssHandler);
		mxEvent.addListener(graph.cellEditor.textarea, 'keyup', updateCssHandler);
		this.listeners.push({destroy: function()
		{
			// No need to remove listener since textarea is destroyed after edit
		}});
		updateCssHandler();
	}

	return container;
};

/**
 * Adds the label menu items to the given menu and parent.
 */
StyleFormatPanel = function(format, editorUi, container)
{
	BaseFormatPanel.call(this, format, editorUi, container);
	this.init();
};

mxUtils.extend(StyleFormatPanel, BaseFormatPanel);

/**
 * Adds the label menu items to the given menu and parent.
 */
StyleFormatPanel.prototype.init = function()
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;
	var ss = this.format.getSelectionState();

	if (!ss.containsImage || ss.style.shape == 'image')
	{
		this.container.appendChild(this.addFill(this.createPanel()));
	}

	this.container.appendChild(this.addStroke(this.createPanel()));
	var opacityPanel = this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_OPACITY, 41);
	opacityPanel.style.paddingTop = '8px';
	opacityPanel.style.paddingBottom = '8px';
	this.container.appendChild(opacityPanel);
	this.container.appendChild(this.addEffects(this.createPanel()));
	var opsPanel = this.addEditOps(this.createPanel());
	opsPanel.style.textAlign = 'center';

	if (opsPanel.firstChild != null)
	{
		mxUtils.br(opsPanel);
	}

	this.container.appendChild(this.addStyleOps(opsPanel));
};

/**
 * Adds the label menu items to the given menu and parent.
 */
StyleFormatPanel.prototype.addEditOps = function(div)
{
	var ss = this.format.getSelectionState();
	var btn = null;

	if (this.editorUi.editor.graph.getSelectionCount() == 1)
	{
		btn = mxUtils.button(mxResources.get('editStyle'), mxUtils.bind(this, function(evt)
		{
			this.editorUi.actions.get('editStyle').funct();
		}));

		btn.setAttribute('title', mxResources.get('editStyle') + ' (' + this.editorUi.actions.get('editStyle').shortcut + ')');

		btn.style.width = '75%';
		btn.style.marginBottom = '5px';
		btn.style.height = '22px';
		btn.className = 'geColorBtn';
		
		div.appendChild(btn);
	}

	if (ss.image)
	{
		var btn2 = mxUtils.button(mxResources.get('editImage'), mxUtils.bind(this, function(evt)
		{
			this.editorUi.actions.get('image').funct();
		}));

		btn2.setAttribute('title', mxResources.get('editImage'));
		btn2.style.marginBottom = '2px';

		if (btn == null)
		{
			btn2.style.width = '75%';
			btn.style.height = '22px';
			btn.className = 'geColorBtn';
		}
		else
		{
			btn.style.width = '36%';
			btn.style.height = '22px';
			btn.className = 'geColorBtn';
			btn2.style.width = '36%';
			btn2.style.marginLeft = '3%';
			btn2.style.height = '22px';
			btn2.className = 'geColorBtn';
		}

		div.appendChild(btn2);
	}

	return div;
};

/**
 * Adds the label menu items to the given menu and parent.
 */
StyleFormatPanel.prototype.addFill = function(container)
{
	var ui = this.editorUi;
	var graph = ui.editor.graph;
	var ss = this.format.getSelectionState();
	container.style.paddingTop = '6px';
	container.style.paddingBottom = '6px';

	// Adds gradient direction option
	var gradientSelect = document.createElement('select');
	gradientSelect.style.position = 'absolute';
	gradientSelect.style.marginTop = '-2px';
	gradientSelect.style.right = (mxClient.IS_QUIRKS) ? '52px' : '72px';
	gradientSelect.style.width = '70px';

	// Stops events from bubbling to color option event handler
	mxEvent.addListener(gradientSelect, 'click', function(evt)
	{
		mxEvent.consume(evt);
	});

	var gradientPanel = this.createCellColorOption(mxResources.get('gradient'), mxConstants.STYLE_GRADIENTCOLOR, '#ffffff', function(color)
	{
		if (color == null || color == mxConstants.NONE)
		{
			gradientSelect.style.display = 'none';
		}
		else
		{
			gradientSelect.style.display = '';
		}
	});

	var fillKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BACKGROUND : mxConstants.STYLE_FILLCOLOR;

	var fillPanel = this.createCellColorOption(mxResources.get('fill'), fillKey, '#ffffff');
	fillPanel.style.fontWeight = 'bold';

	var tmpColor = mxUtils.getValue(ss.style, fillKey, null);
	gradientPanel.style.display = (tmpColor != null && tmpColor != mxConstants.NONE &&
		ss.fill && ss.style.shape != 'image') ? '' : 'none';

	var directions = [mxConstants.DIRECTION_NORTH, mxConstants.DIRECTION_EAST,
	                  mxConstants.DIRECTION_SOUTH, mxConstants.DIRECTION_WEST];

	for (var i = 0; i < directions.length; i++)
	{
		var gradientOption = document.createElement('option');
		gradientOption.setAttribute('value', directions[i]);
		mxUtils.write(gradientOption, mxResources.get(directions[i]));
		gradientSelect.appendChild(gradientOption);
	}

	gradientPanel.appendChild(gradientSelect);

	var listener = mxUtils.bind(this, function()
	{
		ss = this.format.getSelectionState();
		var value = mxUtils.getValue(ss.style, mxConstants.STYLE_GRADIENT_DIRECTION, mxConstants.DIRECTION_SOUTH);

		// Handles empty string which is not allowed as a value
		if (value == '')
		{
			value = mxConstants.DIRECTION_SOUTH;
		}

		gradientSelect.value = value;
		container.style.display = (ss.fill) ? '' : 'none';

		var fillColor = mxUtils.getValue(ss.style, mxConstants.STYLE_FILLCOLOR, null);

		if (!ss.fill || ss.containsImage || fillColor == null || fillColor == mxConstants.NONE)
		{
			gradientPanel.style.display = 'none';
		}
		else
		{
			gradientPanel.style.display = '';
		}
	});

	graph.getModel().addListener(mxEvent.CHANGE, listener);
	this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }});
	listener();

	mxEvent.addListener(gradientSelect, 'change', function(evt)
	{
		graph.setCellStyles(mxConstants.STYLE_GRADIENT_DIRECTION, gradientSelect.value, graph.getSelectionCells());
		mxEvent.consume(evt);
	});

	container.appendChild(fillPanel);
	container.appendChild(gradientPanel);

	if (ss.style.shape == 'swimlane')
	{
		container.appendChild(this.createCellColorOption(mxResources.get('laneColor'), 'swimlaneFillColor', '#ffffff'));
	}

	return container;
};

/**
 * Adds the label menu items to the given menu and parent.
 */
StyleFormatPanel.prototype.addStroke = function(container)
{
	var ui = this.editorUi;
	var graph = ui.editor.graph;
	var ss = this.format.getSelectionState();

	container.style.paddingTop = '4px';
	container.style.paddingBottom = '4px';
	container.style.whiteSpace = 'normal';

	var colorPanel = document.createElement('div');
	colorPanel.style.fontWeight = 'bold';

	// Adds gradient direction option
	var styleSelect = document.createElement('select');
	styleSelect.style.position = 'absolute';
	styleSelect.style.marginTop = '-2px';
	styleSelect.style.right = '72px';
	styleSelect.style.width = '80px';

	var styles = ['sharp', 'rounded', 'curved'];

	for (var i = 0; i < styles.length; i++)
	{
		var styleOption = document.createElement('option');
		styleOption.setAttribute('value', styles[i]);
		mxUtils.write(styleOption, mxResources.get(styles[i]));
		styleSelect.appendChild(styleOption);
	}

	mxEvent.addListener(styleSelect, 'change', function(evt)
	{
		graph.getModel().beginUpdate();
		try
		{
			var keys = [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED];
			// Default for rounded is 1
			var values = ['0', null];

			if (styleSelect.value == 'rounded')
			{
				values = ['1', null];
			}
			else if (styleSelect.value == 'curved')
			{
				values = [null, '1'];
			}

			for (var i = 0; i < keys.length; i++)
			{
				graph.setCellStyles(keys[i], values[i], graph.getSelectionCells());
			}

			ui.fireEvent(new mxEventObject('styleChanged', 'keys', keys,
				'values', values, 'cells', graph.getSelectionCells()));
		}
		finally
		{
			graph.getModel().endUpdate();
		}

		mxEvent.consume(evt);
	});

	// Stops events from bubbling to color option event handler
	mxEvent.addListener(styleSelect, 'click', function(evt)
	{
		mxEvent.consume(evt);
	});

	var strokeKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BORDER : mxConstants.STYLE_STROKECOLOR;

	var lineColor = this.createCellColorOption(mxResources.get('line'), strokeKey, '#000000');
	lineColor.appendChild(styleSelect);
	colorPanel.appendChild(lineColor);

	// Used if only edges selected
	var stylePanel = colorPanel.cloneNode(false);
	stylePanel.style.fontWeight = 'normal';
	stylePanel.style.whiteSpace = 'nowrap';
	stylePanel.style.position = 'relative';
	stylePanel.style.paddingLeft = '16px'
	stylePanel.style.marginBottom = '2px';
	stylePanel.style.marginTop = '2px';
	stylePanel.className = 'geToolbarContainer';

	var addItem = mxUtils.bind(this, function(menu, width, cssName, keys, values)
	{
		var item = this.editorUi.menus.styleChange(menu, '', keys, values, 'geIcon', null);

		var pat = document.createElement('div');
		pat.style.width = width + 'px';
		pat.style.height = '1px';
		pat.style.borderBottom = '1px ' + cssName + ' black';
		pat.style.paddingTop = '6px';

		item.firstChild.firstChild.style.padding = '0px 4px 0px 4px';
		item.firstChild.firstChild.style.width = width + 'px';
		item.firstChild.firstChild.appendChild(pat);

		return item;
	});

	var pattern = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu)
	{
		addItem(menu, 75, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid'));
		addItem(menu, 75, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed'));
		addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
		addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
		addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
	}));

	// Used for mixed selection (vertices and edges)
	var altStylePanel = stylePanel.cloneNode(false);

	var edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-connection', mxResources.get('connection'), false, mxUtils.bind(this, function(menu)
	{
		this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line'));
		this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link'));
		this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['flexArrow', null, null, null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow'));
		this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow'));
	}));

	var altPattern = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu)
	{
		addItem(menu, 33, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid'));
		addItem(menu, 33, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed'));
		addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
		addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
		addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
	}));

	var stylePanel2 = stylePanel.cloneNode(false);

	// Stroke width
	var input = document.createElement('input');
	input.style.textAlign = 'right';
	input.style.marginTop = '2px';
	input.style.width = '41px';

    // LLLLLL修改线条样式菜单 添加创建classname
    input.style.className = 'edgeMenu';
	input.setAttribute('title', mxResources.get('linewidth'));

	stylePanel.appendChild(input);

	var altInput = input.cloneNode(true);
	altStylePanel.appendChild(altInput);

	function update(evt)
	{
		// Maximum stroke width is 999
		var value = parseInt(input.value);
		value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value));

		if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1))
		{
			graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells());
			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH],
					'values', [value], 'cells', graph.getSelectionCells()));
		}

		input.value = value + ' pt';
		mxEvent.consume(evt);
	};

	function altUpdate(evt)
	{
		// Maximum stroke width is 999
		var value = parseInt(altInput.value);
		value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value));

		if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1))
		{
			graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells());
			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH],
					'values', [value], 'cells', graph.getSelectionCells()));
		}

		altInput.value = value + ' pt';
		mxEvent.consume(evt);
	};

	var stepper = this.createStepper(input, update, 1, 9);
	stepper.style.display = input.style.display;
	stepper.style.marginTop = '1px';
	stylePanel.appendChild(stepper);

	var altStepper = this.createStepper(altInput, altUpdate, 1, 9);
	altStepper.style.display = altInput.style.display;
	altStepper.style.marginTop = '1px';
	altStylePanel.appendChild(altStepper);

	if (!mxClient.IS_QUIRKS)
	{
		input.style.position = 'absolute';
		input.style.right = '32px';
		input.style.height = '15px';
		stepper.style.right = '20px';

		altInput.style.position = 'absolute';
		altInput.style.right = '32px';
		altInput.style.height = '15px';
		altStepper.style.right = '20px';
	}
	else
	{
		input.style.height = '17px';
		altInput.style.height = '17px';
	}

	mxEvent.addListener(input, 'blur', update);
	mxEvent.addListener(input, 'change', update);

	mxEvent.addListener(altInput, 'blur', altUpdate);
	mxEvent.addListener(altInput, 'change', altUpdate);

	if (mxClient.IS_QUIRKS)
	{
		mxUtils.br(stylePanel2);
		mxUtils.br(stylePanel2);
	}

	var edgeStyle = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-orthogonal', mxResources.get('waypoints'), false, mxUtils.bind(this, function(menu)
	{
		if (ss.style.shape != 'arrow')
		{
			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight'));
			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal'));
			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple'));
			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple'));
			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));

			if (ss.style.shape == 'connector')
			{
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved'));
			}

			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation'));
		}
	}));

	var lineStart = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-startclassic', mxResources.get('linestart'), false, mxUtils.bind(this, function(menu)
	{
		if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow')
		{
			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.NONE, 0], 'geIcon geSprite geSprite-noarrow', null, false).setAttribute('title', mxResources.get('none'));

			if (ss.style.shape == 'connector')
			{
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-startclassic', null, false).setAttribute('title', mxResources.get('classic'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-startclassicthin', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-startopen', null, false).setAttribute('title', mxResources.get('openArrow'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-startopenthin', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['openAsync', 0], 'geIcon geSprite geSprite-startopenasync', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-startblock', null, false).setAttribute('title', mxResources.get('block'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-startblockthin', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 1], 'geIcon geSprite geSprite-startasync', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-startoval', null, false).setAttribute('title', mxResources.get('oval'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-startdiamond', null, false).setAttribute('title', mxResources.get('diamond'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-startthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-startclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-startclassicthintrans', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-startblockthintrans', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 0], 'geIcon geSprite geSprite-startasynctrans', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-startovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-startdiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-startthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));

				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['dash', 0], 'geIcon geSprite geSprite-startdash', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['cross', 0], 'geIcon geSprite geSprite-startcross', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-startcircleplus', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circle', 1], 'geIcon geSprite geSprite-startcircle', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERone', 0], 'geIcon geSprite geSprite-starterone', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-starteronetoone', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmany', 0], 'geIcon geSprite geSprite-startermany', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-starteronetomany', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-starteroneopt', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false);
			}
			else
			{
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
			}
		}
	}));

	var lineEnd = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-endclassic', mxResources.get('lineend'), false, mxUtils.bind(this, function(menu)
	{
		if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow')
		{
			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.NONE, 0], 'geIcon geSprite geSprite-noarrow', null, false).setAttribute('title', mxResources.get('none'));

			if (ss.style.shape == 'connector')
			{
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-endclassic', null, false).setAttribute('title', mxResources.get('classic'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-endclassicthin', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-endopen', null, false).setAttribute('title', mxResources.get('openArrow'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-endopenthin', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['openAsync', 0], 'geIcon geSprite geSprite-endopenasync', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-endblock', null, false).setAttribute('title', mxResources.get('block'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-endblockthin', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 1], 'geIcon geSprite geSprite-endasync', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-endoval', null, false).setAttribute('title', mxResources.get('oval'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-enddiamond', null, false).setAttribute('title', mxResources.get('diamond'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-endthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-endclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-endclassicthintrans', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-endblockthintrans', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 0], 'geIcon geSprite geSprite-endasynctrans', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-endovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-enddiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-endthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));

				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['dash', 0], 'geIcon geSprite geSprite-enddash', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['cross', 0], 'geIcon geSprite geSprite-endcross', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-endcircleplus', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circle', 1], 'geIcon geSprite geSprite-endcircle', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERone', 0], 'geIcon geSprite geSprite-enderone', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-enderonetoone', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmany', 0], 'geIcon geSprite geSprite-endermany', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-enderonetomany', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-enderoneopt', null, false);
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false);
			}
			else
			{
				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
			}
		}
	}));

	this.addArrow(edgeShape, 8);
	this.addArrow(edgeStyle);
	this.addArrow(lineStart);
	this.addArrow(lineEnd);

	var symbol = this.addArrow(pattern, 9);
	symbol.className = 'geIcon';
	symbol.style.width = '84px';

	var altSymbol = this.addArrow(altPattern, 9);
	altSymbol.className = 'geIcon';
	altSymbol.style.width = '22px';

	var solid = document.createElement('div');
	solid.style.width = '85px';
	solid.style.height = '1px';
	solid.style.borderBottom = '1px solid black';
	solid.style.marginBottom = '9px';
	symbol.appendChild(solid);

	var altSolid = document.createElement('div');
	altSolid.style.width = '23px';
	altSolid.style.height = '1px';
	altSolid.style.borderBottom = '1px solid black';
	altSolid.style.marginBottom = '9px';
	altSymbol.appendChild(altSolid);

	pattern.style.height = '15px';
	altPattern.style.height = '15px';
	edgeShape.style.height = '15px';
	edgeStyle.style.height = '17px';
	lineStart.style.marginLeft = '3px';
	lineStart.style.height = '17px';
	lineEnd.style.marginLeft = '3px';
	lineEnd.style.height = '17px';

	container.appendChild(colorPanel);
	container.appendChild(altStylePanel);
	container.appendChild(stylePanel);

	var arrowPanel = stylePanel.cloneNode(false);
	arrowPanel.style.paddingBottom = '6px';
	arrowPanel.style.paddingTop = '4px';
	arrowPanel.style.fontWeight = 'normal';

	var span = document.createElement('div');
	span.style.position = 'absolute';
	span.style.marginLeft = '3px';
	span.style.marginBottom = '12px';
	span.style.marginTop = '2px';
	span.style.fontWeight = 'normal';
	span.style.width = '76px';

	mxUtils.write(span, mxResources.get('lineend'));
	arrowPanel.appendChild(span);

	var endSpacingUpdate, endSizeUpdate;
	var endSpacing = this.addUnitInput(arrowPanel, 'pt', 74, 33, function()
	{
		endSpacingUpdate.apply(this, arguments);
	});
	var endSize = this.addUnitInput(arrowPanel, 'pt', 20, 33, function()
	{
		endSizeUpdate.apply(this, arguments);
	});

	mxUtils.br(arrowPanel);

	var spacer = document.createElement('div');
	spacer.style.height = '8px';
	arrowPanel.appendChild(spacer);

	span = span.cloneNode(false);
	mxUtils.write(span, mxResources.get('linestart'));
	arrowPanel.appendChild(span);

	var startSpacingUpdate, startSizeUpdate;
	var startSpacing = this.addUnitInput(arrowPanel, 'pt', 74, 33, function()
	{
		startSpacingUpdate.apply(this, arguments);
	});
	var startSize = this.addUnitInput(arrowPanel, 'pt', 20, 33, function()
	{
		startSizeUpdate.apply(this, arguments);
	});

	mxUtils.br(arrowPanel);
	this.addLabel(arrowPanel, mxResources.get('spacing'), 74, 50);
	this.addLabel(arrowPanel, mxResources.get('size'), 20, 50);
	mxUtils.br(arrowPanel);

	var perimeterPanel = colorPanel.cloneNode(false);
	perimeterPanel.style.fontWeight = 'normal';
	perimeterPanel.style.position = 'relative';
	perimeterPanel.style.paddingLeft = '16px'
	perimeterPanel.style.marginBottom = '2px';
	perimeterPanel.style.marginTop = '6px';
	perimeterPanel.style.borderWidth = '0px';
	perimeterPanel.style.paddingBottom = '18px';

	var span = document.createElement('div');
	span.style.position = 'absolute';
	span.style.marginLeft = '3px';
	span.style.marginBottom = '12px';
	span.style.marginTop = '1px';
	span.style.fontWeight = 'normal';
	span.style.width = '120px';
	mxUtils.write(span, mxResources.get('perimeter'));
	perimeterPanel.appendChild(span);

	var perimeterUpdate;
	var perimeterSpacing = this.addUnitInput(perimeterPanel, 'pt', 20, 41, function()
	{
		perimeterUpdate.apply(this, arguments);
	});

	if (ss.edges.length == graph.getSelectionCount())
	{
		container.appendChild(stylePanel2);

		if (mxClient.IS_QUIRKS)
		{
			mxUtils.br(container);
			mxUtils.br(container);
		}

		container.appendChild(arrowPanel);
	}
	else if (ss.vertices.length == graph.getSelectionCount())
	{
		if (mxClient.IS_QUIRKS)
		{
			mxUtils.br(container);
		}

		container.appendChild(perimeterPanel);
	}

	var listener = mxUtils.bind(this, function(sender, evt, force)
	{
		ss = this.format.getSelectionState();
		var color = mxUtils.getValue(ss.style, strokeKey, null);

		if (force || document.activeElement != input)
		{
			var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1));
			input.value = (isNaN(tmp)) ? '' : tmp + ' pt';
		}

		if (force || document.activeElement != altInput)
		{
			var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1));
			altInput.value = (isNaN(tmp)) ? '' : tmp + ' pt';
		}

		styleSelect.style.visibility = (ss.style.shape == 'connector') ? '' : 'hidden';

		if (mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1')
		{
			styleSelect.value = 'curved';
		}
		else if (mxUtils.getValue(ss.style, mxConstants.STYLE_ROUNDED, null) == '1')
		{
			styleSelect.value = 'rounded';
		}

		if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASHED, null) == '1')
		{
			if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, null) == null)
			{
				solid.style.borderBottom = '1px dashed black';
			}
			else
			{
				solid.style.borderBottom = '1px dotted black';
			}
		}
		else
		{
			solid.style.borderBottom = '1px solid black';
		}

		altSolid.style.borderBottom = solid.style.borderBottom;

		// Updates toolbar icon for edge style
		var edgeStyleDiv = edgeStyle.getElementsByTagName('div')[0];
		var es = mxUtils.getValue(ss.style, mxConstants.STYLE_EDGE, null);

		if (mxUtils.getValue(ss.style, mxConstants.STYLE_NOEDGESTYLE, null) == '1')
		{
			es = null;
		}

		if (es == 'orthogonalEdgeStyle' && mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1')
		{
			edgeStyleDiv.className = 'geSprite geSprite-curved';
		}
		else if (es == 'straight' || es == 'none' || es == null)
		{
			edgeStyleDiv.className = 'geSprite geSprite-straight';
		}
		else if (es == 'entityRelationEdgeStyle')
		{
			edgeStyleDiv.className = 'geSprite geSprite-entity';
		}
		else if (es == 'elbowEdgeStyle')
		{
			edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style,
				mxConstants.STYLE_ELBOW, null) == 'vertical') ?
				'geSprite-verticalelbow' : 'geSprite-horizontalelbow');
		}
		else if (es == 'isometricEdgeStyle')
		{
			edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style,
				mxConstants.STYLE_ELBOW, null) == 'vertical') ?
				'geSprite-verticalisometric' : 'geSprite-horizontalisometric');
		}
		else
		{
			edgeStyleDiv.className = 'geSprite geSprite-orthogonal';
		}

		// Updates icon for edge shape
		var edgeShapeDiv = edgeShape.getElementsByTagName('div')[0];

		if (ss.style.shape == 'link')
		{
			edgeShapeDiv.className = 'geSprite geSprite-linkedge';
		}
		else if (ss.style.shape == 'flexArrow')
		{
			edgeShapeDiv.className = 'geSprite geSprite-arrow';
		}
		else if (ss.style.shape == 'arrow')
		{
			edgeShapeDiv.className = 'geSprite geSprite-simplearrow';
		}
		else
		{
			edgeShapeDiv.className = 'geSprite geSprite-connection';
		}

		if (ss.edges.length == graph.getSelectionCount())
		{
			altStylePanel.style.display = '';
			stylePanel.style.display = 'none';
		}
		else
		{
			altStylePanel.style.display = 'none';
			stylePanel.style.display = '';
		}

		function updateArrow(marker, fill, elt, prefix)
		{
			var markerDiv = elt.getElementsByTagName('div')[0];

			markerDiv.className = ui.getCssClassForMarker(prefix, ss.style.shape, marker, fill);

			return markerDiv;
		};

		var sourceDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTARROW, null),
				mxUtils.getValue(ss.style, 'startFill', '1'), lineStart, 'start');
		var targetDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDARROW, null),
				mxUtils.getValue(ss.style, 'endFill', '1'), lineEnd, 'end');

		// Special cases for markers
		if (ss.style.shape == 'arrow')
		{
			sourceDiv.className = 'geSprite geSprite-noarrow';
			targetDiv.className = 'geSprite geSprite-endblocktrans';
		}
		else if (ss.style.shape == 'link')
		{
			sourceDiv.className = 'geSprite geSprite-noarrow';
			targetDiv.className = 'geSprite geSprite-noarrow';
		}

		mxUtils.setOpacity(edgeStyle, (ss.style.shape == 'arrow') ? 30 : 100);

		if (ss.style.shape != 'connector' && ss.style.shape != 'flexArrow')
		{
			mxUtils.setOpacity(lineStart, 30);
			mxUtils.setOpacity(lineEnd, 30);
		}
		else
		{
			mxUtils.setOpacity(lineStart, 100);
			mxUtils.setOpacity(lineEnd, 100);
		}

		if (force || document.activeElement != startSize)
		{
			var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE));
			startSize.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
		}

		if (force || document.activeElement != startSpacing)
		{
			var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0));
			startSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
		}

		if (force || document.activeElement != endSize)
		{
			var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE));
			endSize.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
		}

		if (force || document.activeElement != startSpacing)
		{
			var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0));
			endSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
		}

		if (force || document.activeElement != perimeterSpacing)
		{
			var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_PERIMETER_SPACING, 0));
			perimeterSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
		}
	});

	startSizeUpdate = this.installInputHandler(startSize, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
	startSpacingUpdate = this.installInputHandler(startSpacing, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0, -999, 999, ' pt');
	endSizeUpdate = this.installInputHandler(endSize, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
	endSpacingUpdate = this.installInputHandler(endSpacing, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0, -999, 999, ' pt');
	perimeterUpdate = this.installInputHandler(perimeterSpacing, mxConstants.STYLE_PERIMETER_SPACING, 0, 0, 999, ' pt');

	this.addKeyHandler(input, listener);
	this.addKeyHandler(startSize, listener);
	this.addKeyHandler(startSpacing, listener);
	this.addKeyHandler(endSize, listener);
	this.addKeyHandler(endSpacing, listener);
	this.addKeyHandler(perimeterSpacing, listener);

	graph.getModel().addListener(mxEvent.CHANGE, listener);
	this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }});
	listener();

	return container;
};

/**
 * Adds the label menu items to the given menu and parent.
 */
StyleFormatPanel.prototype.addEffects = function(div)
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;
	var ss = this.format.getSelectionState();

	div.style.paddingTop = '0px';
	div.style.paddingBottom = '2px';

	var table = document.createElement('table');

	if (mxClient.IS_QUIRKS)
	{
		table.style.fontSize = '1em';
	}
	// ppppp复选按钮
	table.style.width = '100%';
	table.style.fontWeight = 'bold';
	table.style.paddingRight = '20px';
	var tbody = document.createElement('tbody');
	var row = document.createElement('tr');
	row.style.padding = '0px';
	var left = document.createElement('td');
	left.style.padding = '0px';
	left.style.width = '50%';
	left.setAttribute('valign', 'top');

	var right = left.cloneNode(true);
	right.style.paddingLeft = '8px';
	row.appendChild(left);
	row.appendChild(right);
	tbody.appendChild(row);
	table.appendChild(tbody);
	div.appendChild(table);

	var current = left;
	var count = 0;

	var addOption = mxUtils.bind(this, function(label, key, defaultValue)
	{
		var opt = this.createCellOption(label, key, defaultValue);
		opt.style.width = '100%';
		current.appendChild(opt);
		current = (current == left) ? right : left;
		count++;
	});

	var listener = mxUtils.bind(this, function(sender, evt, force)
	{
		ss = this.format.getSelectionState();

		left.innerHTML = '';
		right.innerHTML = '';
		current = left;

		if (ss.rounded)
		{
			addOption(mxResources.get('rounded'), mxConstants.STYLE_ROUNDED, 0);
		}

		if (ss.style.shape == 'swimlane')
		{
			addOption(mxResources.get('divider'), 'swimlaneLine', 1);
		}

		if (!ss.containsImage)
		{
			addOption(mxResources.get('shadow'), mxConstants.STYLE_SHADOW, 0);
		}

		if (ss.glass)
		{
			addOption(mxResources.get('glass'), mxConstants.STYLE_GLASS, 0);
		}

		if (ss.comic)
		{
			addOption(mxResources.get('comic'), 'comic', 0);
		}

		if (count == 0)
		{
			div.style.display = 'none';
		}
	});

	graph.getModel().addListener(mxEvent.CHANGE, listener);
	this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }});
	listener();

	return div;
}

/**
 * Adds the label menu items to the given menu and parent.
 */
StyleFormatPanel.prototype.addStyleOps = function(div)
{
	div.style.padding = '10px 0';

	var btn = mxUtils.button(mxResources.get('setAsDefaultStyle'), mxUtils.bind(this, function(evt)
	{
		this.editorUi.actions.get('setAsDefaultStyle').funct();
	}));

	btn.setAttribute('title', mxResources.get('setAsDefaultStyle') + ' (' + this.editorUi.actions.get('setAsDefaultStyle').shortcut + ')');
	btn.style.width = '75%';
	btn.style.height = '22px';
	btn.className = 'geColorBtn';
	div.appendChild(btn);

	return div;
};

/**
 * Adds the label menu items to the given menu and parent.
 */
DiagramFormatPanel = function(format, editorUi, container)
{
	BaseFormatPanel.call(this, format, editorUi, container);
	this.init();
};

mxUtils.extend(DiagramFormatPanel, BaseFormatPanel);

/**
 * Specifies if the background image option should be shown. Default is true.
 */
DiagramFormatPanel.prototype.showBackgroundImageOption = true;

/**
 * Adds the label menu items to the given menu and parent.
 */
DiagramFormatPanel.prototype.init = function()
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;

	this.container.appendChild(this.addView(this.createPanel()));

	if (graph.isEnabled())
	{
		this.container.appendChild(this.addOptions(this.createPanel()));
		this.container.appendChild(this.addPaperSize(this.createPanel()));
		this.container.appendChild(this.addStyleOps(this.createPanel()));
	}
};

/**
 * Adds the label menu items to the given menu and parent.
 */
DiagramFormatPanel.prototype.addView = function(div)
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;

	div.appendChild(this.createTitle(mxResources.get('view')));

	// Grid
	this.addGridOption(div);

	if (graph.isEnabled())
	{
		// Guides
		div.appendChild(this.createOption(mxResources.get('guides'), function()
		{
			return graph.graphHandler.guidesEnabled;
		}, function(checked)
		{
			ui.actions.get('guides').funct();
		},
		{
			install: function(apply)
			{
				this.listener = function()
				{
					apply(graph.graphHandler.guidesEnabled);
				};

				ui.addListener('guidesEnabledChanged', this.listener);
			},
			destroy: function()
			{
				ui.removeListener(this.listener);
			}
		}));

		// Page View
		div.appendChild(this.createOption(mxResources.get('pageView'), function()
		{
			return graph.pageVisible;
		}, function(checked)
		{
			ui.actions.get('pageView').funct();
		},
		{
			install: function(apply)
			{
				this.listener = function()
				{
					apply(graph.pageVisible);
				};

				ui.addListener('pageViewChanged', this.listener);
			},
			destroy: function()
			{
				ui.removeListener(this.listener);
			}
		}));

		// Background
		var bg = this.createColorOption(mxResources.get('background'), function()
		{
			return graph.background;
		}, function(color)
		{
			ui.setBackgroundColor(color);
		}, '#ffffff',
		{
			install: function(apply)
			{
				this.listener = function()
				{
					apply(graph.background);
				};

				ui.addListener('backgroundColorChanged', this.listener);
			},
			destroy: function()
			{
				ui.removeListener(this.listener);
			}
		});

		if (this.showBackgroundImageOption)
		{
			var btn = mxUtils.button(mxResources.get('image'), function(evt)
			{
				ui.showBackgroundImageDialog();
				mxEvent.consume(evt);
			})

			btn.style.position = 'absolute';
			btn.className = 'geColorBtn';
			btn.style.marginTop = '-4px';
			btn.style.paddingBottom = (document.documentMode == 11 || mxClient.IS_MT) ? '0px' : '2px';
			btn.style.height = '22px';
			btn.style.right = (mxClient.IS_QUIRKS) ? '52px' : '72px';
			btn.style.width = '56px';

			bg.appendChild(btn);
		}

		div.appendChild(bg);
	}

	return div;
};

/**
 * Adds the label menu items to the given menu and parent.
 */
DiagramFormatPanel.prototype.addOptions = function(div)
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;

	div.appendChild(this.createTitle(mxResources.get('options')));

	if (graph.isEnabled())
	{
		// Connection arrows
		div.appendChild(this.createOption(mxResources.get('connectionArrows'), function()
		{
			return graph.connectionArrowsEnabled;
		}, function(checked)
		{
			ui.actions.get('connectionArrows').funct();
		},
		{
			install: function(apply)
			{
				this.listener = function()
				{
					apply(graph.connectionArrowsEnabled);
				};

				ui.addListener('connectionArrowsChanged', this.listener);
			},
			destroy: function()
			{
				ui.removeListener(this.listener);
			}
		}));

		// Connection points
		div.appendChild(this.createOption(mxResources.get('connectionPoints'), function()
		{
			return graph.connectionHandler.isEnabled();
		}, function(checked)
		{
			ui.actions.get('connectionPoints').funct();
		},
		{
			install: function(apply)
			{
				this.listener = function()
				{
					apply(graph.connectionHandler.isEnabled());
				};

				ui.addListener('connectionPointsChanged', this.listener);
			},
			destroy: function()
			{
				ui.removeListener(this.listener);
			}
		}));
	}

	return div;
};

/**
 *
 */
DiagramFormatPanel.prototype.addGridOption = function(container)
{
	var ui = this.editorUi;
	var graph = ui.editor.graph;

	var input = document.createElement('input');
	input.style.position = 'absolute';
	input.style.textAlign = 'right';
	input.style.width = '38px';
	input.value = graph.getGridSize() + ' pt';

	var stepper = this.createStepper(input, update);
	input.style.display = (graph.isGridEnabled()) ? '' : 'none';
	stepper.style.display = input.style.display;

	mxEvent.addListener(input, 'keydown', function(e)
	{
		if (e.keyCode == 13)
		{
			graph.container.focus();
			mxEvent.consume(e);
		}
		else if (e.keyCode == 27)
		{
			input.value = graph.getGridSize();
			graph.container.focus();
			mxEvent.consume(e);
		}
	});

	function update(evt)
	{
		var value = parseInt(input.value);
		value = Math.max(1, (isNaN(value)) ? 10 : value);

		if (value != graph.getGridSize())
		{
			graph.setGridSize(value)
		}

		input.value = value + ' pt';
		mxEvent.consume(evt);
	};

	mxEvent.addListener(input, 'blur', update);
	mxEvent.addListener(input, 'change', update);

	if (mxClient.IS_SVG)
	{
		input.style.marginTop = '-2px';
		input.style.right = '84px';
		stepper.style.marginTop = '-20px';
		stepper.style.right = '72px';

		var panel = this.createColorOption(mxResources.get('grid'), function()
		{
			var color = graph.view.gridColor;

			return (graph.isGridEnabled()) ? color : null;
		}, function(color)
		{
			if (color == mxConstants.NONE)
			{
				graph.setGridEnabled(false);
				ui.fireEvent(new mxEventObject('gridEnabledChanged'));
			}
			else
			{
				graph.setGridEnabled(true);
				ui.setGridColor(color);
			}

			input.style.display = (graph.isGridEnabled()) ? '' : 'none';
			stepper.style.display = input.style.display;
		}, '#e0e0e0',
		{
			install: function(apply)
			{
				this.listener = function()
				{
					apply((graph.isGridEnabled()) ? graph.view.gridColor : null);
				};

				ui.addListener('gridColorChanged', this.listener);
				ui.addListener('gridEnabledChanged', this.listener);
			},
			destroy: function()
			{
				ui.removeListener(this.listener);
			}
		});

		panel.appendChild(input);
		panel.appendChild(stepper);
		container.appendChild(panel);
	}
	else
	{
		input.style.marginTop = '2px';
		input.style.right = '32px';
		stepper.style.marginTop = '2px';
		stepper.style.right = '20px';

		container.appendChild(input);
		container.appendChild(stepper);

		container.appendChild(this.createOption(mxResources.get('grid'), function()
		{
			return graph.isGridEnabled();
		}, function(checked)
		{
			graph.setGridEnabled(checked);

			if (graph.isGridEnabled())
			{
				graph.view.gridColor = '#e0e0e0';
			}

			ui.fireEvent(new mxEventObject('gridEnabledChanged'));
		},
		{
			install: function(apply)
			{
				this.listener = function()
				{
					input.style.display = (graph.isGridEnabled()) ? '' : 'none';
					stepper.style.display = input.style.display;

					apply(graph.isGridEnabled());
				};

				ui.addListener('gridEnabledChanged', this.listener);
			},
			destroy: function()
			{
				ui.removeListener(this.listener);
			}
		}));
	}
};

/**
 * Adds the label menu items to the given menu and parent.
 */
DiagramFormatPanel.prototype.addDocumentProperties = function(div)
{
	// Hook for subclassers
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;

	div.appendChild(this.createTitle(mxResources.get('options')));

	return div;
};

/**
 * Adds the label menu items to the given menu and parent.
 */
DiagramFormatPanel.prototype.addPaperSize = function(div)
{
	var ui = this.editorUi;
	var editor = ui.editor;
	var graph = editor.graph;

	div.appendChild(this.createTitle(mxResources.get('paperSize')));

	var label1 = document.createElement('label');
	label1.className = 'radio';
	var label2 = label1.cloneNode(false);
	
	var portraitCheckBox = document.createElement('input');
	portraitCheckBox.setAttribute('name', 'format');
	portraitCheckBox.setAttribute('type', 'radio');
	portraitCheckBox.setAttribute('value', 'portrait');

	var landscapeCheckBox = document.createElement('input');
	landscapeCheckBox.setAttribute('name', 'format');
	landscapeCheckBox.setAttribute('type', 'radio');
	landscapeCheckBox.setAttribute('value', 'landscape');

	var paperSizeSelect = document.createElement('select');
	paperSizeSelect.style.marginBottom = '8px';
	paperSizeSelect.style.width = '202px';

	var formatDiv = document.createElement('div');
	formatDiv.style.marginLeft = '4px';
	formatDiv.style.width = '210px';
	formatDiv.style.height = '24px';

	portraitCheckBox.style.marginRight = '6px';
	label1.appendChild(portraitCheckBox);
	
	var portraitSpan = document.createElement('span');
	portraitSpan.style.maxWidth = '100px';
	mxUtils.write(portraitSpan, mxResources.get('portrait'));
	label1.appendChild(portraitSpan);
	formatDiv.appendChild(label1);

	landscapeCheckBox.style.marginLeft = '10px';
	landscapeCheckBox.style.marginRight = '6px';
	label2.appendChild(landscapeCheckBox);

	var landscapeSpan = document.createElement('span');
	landscapeSpan.style.width = '100px';
	mxUtils.write(landscapeSpan, mxResources.get('landscape'));
	label2.appendChild(landscapeSpan);
	formatDiv.appendChild(label2);

	var customDiv = document.createElement('div');
	customDiv.style.marginLeft = '4px';
	customDiv.style.width = '210px';
	customDiv.style.height = '24px';

	var widthInput = document.createElement('input');
	widthInput.setAttribute('size', '6');
	widthInput.setAttribute('value', graph.pageFormat.width);
	customDiv.appendChild(widthInput);
	mxUtils.write(customDiv, ' x ');

	var heightInput = document.createElement('input');
	heightInput.setAttribute('size', '6');
	heightInput.setAttribute('value', graph.pageFormat.height);
	customDiv.appendChild(heightInput);
	mxUtils.write(customDiv, ' pt');

	formatDiv.style.display = 'none';
	customDiv.style.display = 'none';

	var pf = new Object();
	var formats = PageSetupDialog.getFormats();

	for (var i = 0; i < formats.length; i++)
	{
		var f = formats[i];
		pf[f.key] = f;

		var paperSizeOption = document.createElement('option');
		paperSizeOption.setAttribute('value', f.key);
		mxUtils.write(paperSizeOption, f.title);
		paperSizeSelect.appendChild(paperSizeOption);
	}

	var customSize = false;

	function listener(sender, evt, force)
	{
		if (force || (widthInput != document.activeElement && heightInput != document.activeElement))
		{
			var detected = false;

			for (var i = 0; i < formats.length; i++)
			{
				var f = formats[i];

				// Special case where custom was chosen
				if (customSize)
				{
					if (f.key == 'custom')
					{
						paperSizeSelect.value = f.key;
						customSize = false;
					}
				}
				else if (f.format != null)
				{
					if (graph.pageFormat.width == f.format.width && graph.pageFormat.height == f.format.height)
					{
						paperSizeSelect.value = f.key;
						portraitCheckBox.setAttribute('checked', 'checked');
						portraitCheckBox.defaultChecked = true;
						portraitCheckBox.checked = true;
						landscapeCheckBox.removeAttribute('checked');
						landscapeCheckBox.defaultChecked = false;
						landscapeCheckBox.checked = false;
						detected = true;
					}
					else if (graph.pageFormat.width == f.format.height && graph.pageFormat.height == f.format.width)
					{
						paperSizeSelect.value = f.key;
						portraitCheckBox.removeAttribute('checked');
						portraitCheckBox.defaultChecked = false;
						portraitCheckBox.checked = false;
						landscapeCheckBox.setAttribute('checked', 'checked');
						landscapeCheckBox.defaultChecked = true;
						landscapeCheckBox.checked = true;
						detected = true;
					}
				}
			}

			// Selects custom format which is last in list
			if (!detected)
			{
				widthInput.value = graph.pageFormat.width;
				heightInput.value = graph.pageFormat.height;
				paperSizeOption.setAttribute('selected', 'selected');
				portraitCheckBox.setAttribute('checked', 'checked');
				portraitCheckBox.defaultChecked = true;
				formatDiv.style.display = 'none';
				customDiv.style.display = '';
			}
			else
			{
				formatDiv.style.display = '';
				customDiv.style.display = 'none';
			}
		}
	};
	listener();

	div.appendChild(paperSizeSelect);
	mxUtils.br(div);

	div.appendChild(formatDiv);
	div.appendChild(customDiv);

	var update = function()
	{
		var f = pf[paperSizeSelect.value];

		if (f.format != null)
		{
			widthInput.value = f.format.width;
			heightInput.value = f.format.height;
			customDiv.style.display = 'none';
			formatDiv.style.display = '';
		}
		else
		{
			formatDiv.style.display = 'none';
			customDiv.style.display = '';
		}

		var size = new mxRectangle(0, 0, parseInt(widthInput.value), parseInt(heightInput.value));

		if (paperSizeSelect.value != 'custom' && landscapeCheckBox.checked)
		{
			size = new mxRectangle(0, 0, size.height, size.width);
		}

		if (graph.pageFormat == null || graph.pageFormat.width != size.width || graph.pageFormat.height != size.height)
		{
			ui.setPageFormat(size);
		}
	};

	this.addKeyHandler(widthInput, listener);
	this.addKeyHandler(heightInput, listener);

	mxEvent.addListener(portraitSpan, 'click', function(evt)
	{
		portraitCheckBox.checked = true;
		update();
		mxEvent.consume(evt);
	});

	mxEvent.addListener(landscapeSpan, 'click', function(evt)
	{
		landscapeCheckBox.checked = true;
		update();
		mxEvent.consume(evt);
	});

	mxEvent.addListener(widthInput, 'blur', update);
	mxEvent.addListener(widthInput, 'click', update);
	mxEvent.addListener(heightInput, 'blur', update);
	mxEvent.addListener(heightInput, 'click', update);
	mxEvent.addListener(landscapeCheckBox, 'change', update);
	mxEvent.addListener(portraitCheckBox, 'change', update);
	mxEvent.addListener(paperSizeSelect, 'change', function()
	{
		// Handles special case where custom was chosen
		customSize = paperSizeSelect.value == 'custom';
		update();
	});

	ui.addListener('pageFormatChanged', listener);
	this.listeners.push({destroy: function() { ui.removeListener(listener); }});

	graph.getModel().addListener(mxEvent.CHANGE, listener);
	this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }});

	update();

	return div;
};

/**
 * Adds the label menu items to the given menu and parent.
 */
DiagramFormatPanel.prototype.addStyleOps = function(div)
{

// 	var btn = mxUtils.button(mxResources.get('editData'), mxUtils.bind(this, function(evt)
// 	{
// 		this.editorUi.actions.get('editData').funct();
// 	}));
	
	// btn.setAttribute('title', mxResources.get('editData') + ' (' + this.editorUi.actions.get('editData').shortcut + ')');
	// btn.style.width = '82%';
	// btn.style.marginLeft = '9%';
	// btn.style.marginBottom = '2px';
	// div.appendChild(btn);
    //
	// mxUtils.br(div);

	var btn = mxUtils.button(mxResources.get('clearDefaultStyle'), mxUtils.bind(this, function(evt)
	{
		this.editorUi.actions.get('clearDefaultStyle').funct();
	}));

	btn.setAttribute('title', mxResources.get('clearDefaultStyle') + ' (' + this.editorUi.actions.get('clearDefaultStyle').shortcut + ')');
    btn.style.width = '75%';
	btn.className = 'btn-purple';

	div.style.padding = '10px 0';
	div.style.textAlign = 'center';
	div.appendChild(btn);

	return div;
};

/**
 * Adds the label menu items to the given menu and parent.
 */
DiagramFormatPanel.prototype.destroy = function()
{
	BaseFormatPanel.prototype.destroy.apply(this, arguments);

	if (this.gridEnabledListener)
	{
		this.editorUi.removeListener(this.gridEnabledListener);
		this.gridEnabledListener = null;
	}
};

/**
 * Attribute panel init
 */
AttributePanel.prototype.init = function()
{
    var editorUi = this.editorUi;
    var editor = editorUi.editor;
    var graph = editor.graph;
    var cell = graph.getSelectionCell() || graph.getModel().getRoot();

    //Get attribute
    var value = graph.getModel().getValue(cell);
    // Converts the value to an XML node
    if (!mxUtils.isNode(value))
    {
        var doc = mxUtils.createXmlDocument();
        var obj = doc.createElement('object');
        obj.setAttribute('label', value || '');

        //如果新建图形，则object(id==0)设置默认初始属性
        if(editorUi.interfaceParams.operator == 'new' && editorUi.interfaceParams.type == 'model' && cell.getId() == '0')
        {
            for(var o in editorUi.initAttributes){
                obj.setAttribute(o,  JSON.stringify(editorUi.initAttributes[o]));
            }
        }
        value = obj;
    }
    graph.getModel().setValue(cell, value);
    var attrs = value.attributes;
    var tObj = {};
    var allNames = [];
    for (var i = 0; i < attrs.length; i++)
    {
        if (attrs[i].nodeName == 'intrinsic' || attrs[i].nodeName == 'extended' || attrs[i].nodeName == 'userFunc')
        {
            tObj[attrs[i].nodeName] = JSON.parse(attrs[i].nodeValue);
            for( var j in tObj[attrs[i].nodeName]){
                allNames.push(tObj[attrs[i].nodeName][j].name);
            }
        }
    }
    if(Object.keys(tObj).length < 2)
    {
        tObj['intrinsic'] = (tObj['intrinsic'] != null) ? tObj['intrinsic'] : [];
        tObj['extended'] = (tObj['extended'] != null) ? tObj['extended'] : [];
        // tObj['userFunc'] = (tObj['userFunc'] != null) ? tObj['userFunc'] : [];
    }
    //拓扑图最外层不需要动态属性
    if(tObj['extended'] && editorUi.interfaceParams.type != 'model' && cell.getId() == '0') {
    	delete tObj['extended'];
	}

	this.createEnhancedPanel();
    // this.createEnhanced();

    for( var o in tObj){
		this.createAttrsPanel(cell, value, tObj[o], o, allNames);
    }

    if((cell.getStyle() && cell.getStyle().indexOf('group')) >= 0 || (cell.getId() == '0' && editorUi.interfaceParams.type == 'model')) {
        this.collapsedImage(cell, value)
    }
};

/**
 * Set collapsed image
 */
AttributePanel.prototype.collapsedImage = function(cell, value)
{
	var ui = this.editorUi;
    var graph = ui.editor.graph;

    var container = this.container;
    var title = this.createTitle(mxResources.get('image'));
    title.style.paddingLeft = '18px';
    title.style.paddingTop = '10px';
    title.style.paddingBottom = '6px';
    container.appendChild(title);

    var div = this.createPanel();
    this.container.appendChild(div);
    // div.style.position = 'absolute';

    var form = new mxForm('properties');
    form.table.style.width = '95%';
    form.table.className = 'properties table-def';

    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    var image = document.createElement('img');
    image.style.maxWidth = '60px';
    image.style.maxHeight = '60px';
    image.style.border = '1px solid white';
	image.src = (value.getAttribute('image') && value.getAttribute('image') != 'null') ? value.getAttribute('image') : mxGraph.prototype.collapsedImage.src;
    td1.appendChild(image);

    var td0 = document.createElement('td');
    td0.style.minWidth = '5px';

    var td2 = document.createElement('td');
	var imgA = document.createElement('a');
	imgA.className = 'fileA btn-purple';
	mxUtils.write(imgA, mxResources.get('selectThumbnail'));
    var imgInput = document.createElement('input');
	imgInput.className = 'fileInput';
    imgInput.setAttribute('type', 'file');
    imgInput.setAttribute('accept', 'image/png,image/jpeg');
	imgA.appendChild(imgInput);
    td2.appendChild(imgA);

    tr.appendChild(td1);
    tr.appendChild(td0);
    tr.appendChild(td2);
    form.table.appendChild(tr);

    div.appendChild(form.table);

    
    mxEvent.addListener(imgInput, 'change', mxUtils.bind(this,function(){
		this.uploadImg(imgInput, image, cell, value);
	}));

};

//图片上传
AttributePanel.prototype.uploadImg = function(imgInput, image, cell, value) {
	var ui = this.editorUi;
	var graph = ui.editor.graph;
	if (imgInput.files.length > 0) {
		//Check file size
		var fileSize = imgInput.files[0].size;
		if(fileSize > ui.maxUploadImgSize * 1024 * 1024){
			mxUtils.alert(mxResources.get('maxFileSize', [ui.maxUploadImgSize]));
			return;
		}
		var img = new Image();
		var reader = new FileReader();
		reader.onload = function (e) {
			img.src = e.target.result;
			var url = BASE_URL + SAVE_IMG;
			var params = 'data=' + encodeURIComponent(img.src);
			mxUtils.post(url, params, mxUtils.bind(this, function (req) {
				var result = JSON.parse(req.getText());
				if (result.status == 0) {
					var src = UPLOADIMAGE_PATH + '/' + result.data.url;
					image.src = src;
					value.setAttribute('image', src);
					var model = graph.getModel();
					graph.isUploadImage = true;
					model.setValue(cell, value);
					if(graph.isCellCollapsed(cell)) {
						graph.foldCells(false);
						graph.foldCells(true);
					}
				}
				else {
					mxUtils.alert(result.data.msg);
				}
			}));
		};
		reader.readAsDataURL(imgInput.files[0]);
	}
};

/**
 * 创建固有属性面板
 * @param ui
 * @param cell
 */
AttributePanel.prototype.createAttrsPanel = function(cell, value, attrs, type, allNames)
{
	var ui = this.editorUi;
    var graph = ui.editor.graph;
	var container = this.container;
    var title = this.createTitle(mxResources.get(type));
    title.style.paddingLeft = '18px';
    title.style.paddingTop = '10px';
    title.style.paddingBottom = '6px';

    container.appendChild(title);

    var div = this.createPanel();
    this.container.appendChild(div);

    var form = new mxForm('properties');
    form.table.style.width = '95%';
    form.table.style.paddingRight = '20px';

    var names = [];
    var arrAttr = [];
    var count = 0;
    var currentName;

    //删除编辑表格tr
    function removeEditTr()
	{
        var editTr = form.body.getElementsByClassName(type + 'EditAttributes');
        if(editTr.length > 0){
            for(var i = editTr.length - 1; i >= 0; i--) {
                form.body.removeChild(editTr[i]);
            }
        }
	};

    //检测数组中是否有重复值
	function checkArrayIfDuplicateValues(arr){
        var narr = arr.sort();
        var ret = {};
        ret.status = false;
        for(var i in arr)
        {
            if (narr[i] == narr[parseInt(i) + 1])
            {
            	ret.status = true;
            	ret.data = narr[i];
                return ret;
            }
        }
        return ret;
    };

	//保存属性到cell的object, 传入index参数则更新arrAttr, 不传入index参数不需要更新arrAttr(比如删除某个属性)
	function saveAttributesToObject(ele, index)
	{
        // value = value.cloneNode(true);
        var arr = [];
        if(index != null) {
        	var name = ele.name.value;
        	if (name == '')
        	{
        		window.alert(mxResources.get('propertyNameIsEmpty'));
        		return false;
			}
			for (var i in allNames)
			{
                if (arrAttr[index].name == allNames[i]){
					allNames[i] = name;
					var tmp = mxUtils.clone(allNames);
                    var ret = checkArrayIfDuplicateValues(tmp);
                    if(ret.status)
                    {
                        allNames[i] = arrAttr[index].name;
                        window.alert(mxResources.get('duplicateName') + ': "' + ret.data +'"');
                        return false;
                    }
					break;
				}
			}

            for(var o in ele)
            {
                if(ele[o] instanceof Array)
                {
                    arrAttr[index][o] = [];
                    for(var j in ele[o])
                    {
                        arrAttr[index][o].push(ele[o][j].value);
                    }
                }
                else {
                    arrAttr[index][o] = ele[o].value;
                }
            }
		}

        for(var i in arrAttr){
            if(arrAttr[i] != null){
                arr.push(arrAttr[i]);
            }
        }
        //set value's attribute
        value.setAttribute(type, JSON.stringify(arr));
        // Updates the value of the cell (undoable)
        graph.getModel().setValue(cell, value);

        return true;
	}

    var addRemoveButton = function(ele, name)
    {
        var td = document.createElement('td');
        var removeAttr = document.createElement('a');
        var img = mxUtils.createImage("images/delete.png");
        img.style.height = '15px';
		img.style.opacity = '.6';

        removeAttr.className = 'geButton';
        removeAttr.setAttribute('title', mxResources.get('delete'));
        removeAttr.style.fontSize = '14px';
        removeAttr.style.cursor = 'pointer';
        removeAttr.style.marginLeft = '6px';
        removeAttr.appendChild(img);
        var removeAttrFn = (function(ele)
        {
            return function()
            {
            	var name = ele.childNodes[0].innerText;
                var count = 0;
                for (var j = 0; j < names.length; j++)
                {
                    if (names[j] == name)
                    {
                    	if (!window.confirm(mxResources.get('sureToDelete', ['"' + name + '"']) + '?')){
                    		break;
						}
                        delete arrAttr[j];
                    	for (var k in allNames) {
                    		if(allNames[k] == name){
                    			delete allNames[k];
                    			break;
							}
						}
                        removeEditTr();
                        form.table.deleteRow(count);
                        saveAttributesToObject();
                        break;
                    }
                    if (arrAttr[j] != null)
                    {
                        count++;
                    }
                }
            };
        })(ele);

        mxEvent.addListener(removeAttr, 'click', removeAttrFn);

        td.appendChild(removeAttr);
        ele.appendChild(td);
    };

    //编辑操作按钮
    var addEditButton = function(ele, attr)
    {
        var td = document.createElement('td');
        var editAttr = document.createElement('a');
        var img = mxUtils.createImage(Dialog.prototype.editImage);
        img.style.height = '15px';
		img.style.opacity = '.7';

        editAttr.className = 'geButton';
        editAttr.setAttribute('title', mxResources.get('edit'));
        editAttr.style.fontSize = '14px';
        editAttr.style.cursor = 'pointer';
        editAttr.style.marginLeft = '6px';
        editAttr.appendChild(img);

        var editAttrFn = (function(attr)
        {
        	return function()
			{
                removeEditTr();
                var count = 0;
                for (var j = 0; j < names.length; j++)
                {
                    if (names[j] == attr.name)
                    {
                        break;
                    }
                    if (arrAttr[j] != null)
                    {
                        count++;
                    }
                }
                addEditAttributeElements(attr, count + 1, type, j);
			};
        })(attr);

        mxEvent.addListener(editAttr, 'click', editAttrFn);

        td.appendChild(editAttr);
        ele.appendChild(td);
    };

    //添加属性列表
    var addRows = function(attr, index, model)
	{
		if(attr == null)
			return;

        var name = attr.name;
		var data = [];
        data['name'] = name;
        if(model == 'new') {
            allNames.push(name);
		}
        data['description'] = attr.description;
        var value = [];
        for(var i in attr.value){
        	if(type == 'intrinsic') {
        		value.push(attr.value[i]);
			}
			else {
                value.push(attr.operator[i] + attr.value[i] + ((attr.logic[i] != null　&& attr.logic[i] != 'none') ? (' ' + attr.logic[i]) : ''));
			}
		}
		data['value'] = value.join(' ');

        names[index] = name;
        var ele = form.addListAttributeElements(data, type);
        arrAttr[index] = attr;
        addEditButton(ele, attr);
        var rootFlag = (cell.getId() == '0') ? true : false;
        var generalFlag = (cell.getCategory() == null || cell.getCategory() == 'general') ? true : false;
        if(type != 'intrinsic' || (type == 'intrinsic' && ui.interfaceParams.type == 'model'
			&& (!rootFlag || (rootFlag && attr.name != 'name' && attr.name != 'category' && attr.name != 'type')))
			|| (type == 'intrinsic' && ui.interfaceParams.type != 'model' && (rootFlag || (!rootFlag && generalFlag)))
		) {
			addRemoveButton(ele, name);
        }
	};

    for (var i = 0; i < attrs.length; i++)
    {
    	addRows(attrs[i], count);
		count++;
    }

    div.appendChild(form.table);

    //添加查询条件
    function addAttributeCondition(dType, operator, value, logic)
	{
        var ele = [];
		if(type != 'intrinsic') {
            dType = dType || 'string';

            ele['operator'] = document.createElement('select');
            ele['operator'].style.width = '26%';
            ele['operator'].style.float = 'left';
            for(var i in ui.attributeOperator[dType]) {
                var opt = document.createElement('option');
                opt.setAttribute('value', ui.attributeOperator[dType][i]);
                mxUtils.write(opt, ui.attributeOperator[dType][i]);
                ele['operator'].appendChild(opt);
                if (operator == ui.attributeOperator[dType][i]) {
                    opt.setAttribute('selected', 'true');
                }
            }
		}

        ele['value'] = document.createElement('input');
        ele['value'].style.width = (type == 'intrinsic') ? '90%' : '29%';
        ele['value'].style.height = '15px';
        ele['value'].style.float = 'left';
        ele['value'].value = (value != null) ? value : '';

        if(type != 'intrinsic') {
            ele['logic'] = document.createElement('select');
            ele['logic'].style.width = '35%';
            ele['logic'].style.float = 'left';
            for(var j in ui.attributeLogic) {
                var opt = document.createElement('option');
                opt.setAttribute('value', ui.attributeLogic[j]);
                mxUtils.write(opt, ui.attributeLogic[j]);
                ele['logic'].appendChild(opt);
                if(logic == ui.attributeLogic[j]){
                    opt.setAttribute('selected', 'true');
                }
            }
		}

        return ele;
	}

    //添加属性编辑元素表格
    function addEditAttributeElements(attr, count, type, index)
    {
        var editTr = form.body.insertRow(count);
        editTr.className = type + 'EditAttributes';

        var td1 = document.createElement('td');
        td1.style.paddingTop = '3px';
        // td1.style.height = '100px';
		td1.style.color = '#788da3';
		td1.style.fontSize = '12px';
		td1.style.borderTop = '0';

        var td2 = document.createElement('td');
        td2.style.borderTop = '0';
        td2.setAttribute('colspan', 2);

        var br = document.createElement('br');

        var editElement = {};
        var cancelBtn = mxUtils.button('', function()
        {
            removeEditTr();
        });
        cancelBtn.style.display = 'block';
		cancelBtn.style.opacity = '.5';
		cancelBtn.title = mxResources.get('cancel');
        cancelBtn.className = 'icon-24 icon-delete';

        var applyBtn = mxUtils.button('', function()
        {
            try
            {
                var ret = saveAttributesToObject(editElement, index);
				if(!ret){
					return;
				}
                //获取属性编辑的tr
                var editTr = form.body.getElementsByClassName(type + 'EditAttributes');
				//将修改的属性内容更新到表格
				names[index] = arrAttr[index].name;
				if(type == 'intrinsic') {
                    editTr[0].previousSibling.childNodes[0].innerText = arrAttr[index].name;
                    editTr[0].previousSibling.childNodes[0].setAttribute('title',  "Key:" + arrAttr[index].name);
                    editTr[0].previousSibling.childNodes[1].innerText = arrAttr[index].value[0];
                    editTr[0].previousSibling.childNodes[1].setAttribute('title', mxResources.get('value') + ":" + arrAttr[index].value[0]);
				}
				else {
                    editTr[0].previousSibling.childNodes[0].innerText = arrAttr[index].name;
                    editTr[0].previousSibling.childNodes[0].setAttribute('title', mxResources.get('name') + ":" + arrAttr[index].name);
                    editTr[0].previousSibling.childNodes[1].innerText = arrAttr[index].description;
                    editTr[0].previousSibling.childNodes[1].setAttribute('title', mxResources.get('description') + ":" + arrAttr[index].description);
                    var arr = [];
                    for(var i in arrAttr[index].value){
                        arr.push(arrAttr[index].operator[i] + arrAttr[index].value[i] + ((arrAttr[index].logic[i] != null　&& arrAttr[index].logic[i] != 'none') ? (' ' + arrAttr[index].logic[i]) : ''));
                    }
                    editTr[0].previousSibling.childNodes[2].innerText = arr.join(' ');
                    editTr[0].previousSibling.childNodes[2].setAttribute('title', mxResources.get('value') + ":" + arr.join(' '));
				}

				// 关闭属性编辑的tr
                removeEditTr();
            }
            catch (e)
            {
                mxUtils.alert(e);
            }
        });
        applyBtn.style.display = 'block';
		applyBtn.style.marginBottom = '10px';
		applyBtn.style.cursor = 'pointer';
		applyBtn.style.opacity = '.5';
		applyBtn.title = mxResources.get('save', ['']);
        applyBtn.className = 'icon-24 icon-tick';

        for(var o in attr)
        {
            if( o == 'operator' || o == 'logic' || (type == 'intrinsic' && (o == 'description' || o =='dataType' ))) {
                continue;
            }
            var div = document.createElement('div');
            div.innerText = mxResources.get(o) + ":";
            div.style.height = '20px';
            div.style.paddingBottom = '0';
			td1.appendChild(div);

            if(o == 'name' || o == 'description') {
				editElement[o] = document.createElement('input');
                editElement[o].style.width = '90%';
                editElement[o].style.height = '15px';
                editElement[o].style.display = 'block';
                editElement[o].style.marginBottom = '2px';
                if(ui.interfaceParams.type == 'model' && cell.getId() == '0' &&
					o == 'name' && (attr[o] == 'name' || attr[o] == 'category' || attr[o] == 'type')){
                    editElement[o].disabled = 'disabled';
                }
                // input.style.marginLeft = '5px';
                editElement[o].value = attr[o];
                td2.appendChild(editElement[o]);
            }
            else if(o == 'dataType') {
                editElement[o] = document.createElement('select');
                editElement[o].style.width = '97%';
                editElement[o].style.display = 'block';
                editElement[o].style.marginBottom = '2px';
                for(var i in ui.attributeDataType) {
                    var opt = document.createElement('option');
                    opt.setAttribute('value', ui.attributeDataType[i]);
                    mxUtils.write(opt, mxResources.get(ui.attributeDataType[i]));
                    editElement[o].appendChild(opt);
                    if(attr[o] == ui.attributeDataType[i]){
                        opt.setAttribute('selected', 'true');
                    }
                }
                td2.appendChild(editElement[o]);
            }
            else if(o == 'value'){
                editElement['operator'] = [];
                editElement['value'] = [];
                editElement['logic'] = [];
                for(var i in attr.value)
				{
                    var tmp = addAttributeCondition(attr.dataType, attr.operator[i], attr.value[i], attr.logic[i]);
                    for( var j in tmp){
                    	editElement[j].push(tmp[j]);
                        td2.appendChild(editElement[j][i]);
					}
				}
            }
        }

        editTr.appendChild(td1);
        editTr.appendChild(td2);

        var td3 = document.createElement('td');
        td3.style.paddingLeft = '5px'
		td3.style.borderTop = '0';
        td3.setAttribute('colspan', 2);
        td3.appendChild(applyBtn);
        td3.appendChild(cancelBtn);
        editTr.appendChild(td3);

        function updateDTypeSelect() {
        	var dType = editElement['dataType'].value;
			for(var i in editElement['operator']){
                editElement['operator'][i].options.length = 0;
				for(var j in ui.attributeOperator[dType]) {
					var opt = document.createElement('option');
					opt.setAttribute('value', ui.attributeOperator[dType][j]);
					mxUtils.write(opt, ui.attributeOperator[dType][j]);
					editElement['operator'][i].appendChild(opt);
					if(attr.operator[i] == ui.attributeOperator[dType][j]){
						opt.setAttribute('selected', 'true');
					}
				}
			}

        };
        //监听属性编辑中的数据类型的change事件
		if(editElement['dataType'] != null) {
            mxEvent.addListener(editElement['dataType'], 'change', updateDTypeSelect);
		}

        function updateLogicSelect() {
        	var len = parseInt(editElement['logic'].length);
        	for(var i in editElement['logic'])		//删除后面的查询条件
        	{
                var logic = editElement['logic'][i].value;
                if(logic == 'none' && i < len - 1) {
                	//删除以下的editElement['operator'],['value'],['logic'];
					for(var j = parseInt(len - 1); j > i; j--)
                    {
                        td2.removeChild(editElement['operator'][j]);
                        td2.removeChild(editElement['value'][j]);
                        td2.removeChild(editElement['logic'][j]);
                        mxEvent.removeListener(editElement['logic'][j], 'change', updateLogicSelect);
                        delete editElement['operator'][j];
                        editElement['operator'].length--;
                        delete editElement['value'][j];
                        editElement['value'].length--;
                        delete editElement['logic'][j];
                        editElement['logic'].length--;

                    }
                    break;
				}
				else if(logic != 'none' && i == len -1)			//添加查询条件
				{
                    var dType = editElement['dataType'].value;
                    var tmp = addAttributeCondition(dType);
                    for( var j in tmp){
                        editElement[j].push(tmp[j]);
                        td2.appendChild(editElement[j][len]);
                    }
                    mxEvent.addListener(editElement['logic'][len], 'change', updateLogicSelect);

				}
            }
        };
        //监听属性编辑中的logic的change事件
        for(var k in editElement['logic']) {
            mxEvent.addListener(editElement['logic'][k], 'change', updateLogicSelect);
        }
    };

    //固有属性不允许添加和删除， 可以修改编辑
    if(type != 'intrinsic' || cell.getCategory() == null || cell.getCategory() == 'general' ||
		(type == 'intrinsic' &&
		(ui.interfaceParams.type == 'model' ||
		(ui.interfaceParams.type != 'model' && cell.getId() == 0)
		)))
    {
		var newProp = document.createElement('div');
		newProp.style.whiteSpace = 'nowrap';
		newProp.style.marginTop = '16px';
		newProp.style.textAlign = 'center';

		div.appendChild(newProp);

        var addBtn = mxUtils.button(mxResources.get('addProperty'), function () {
			var attr = ui.defaultAttributesStructure();
            addRows(attr, count, 'new');
            count++;
            var ct = 0;
            for (var j = 0; j < names.length; j++)
            {
                if (arrAttr[j] != null)
                {
                    ct++;
                }
            }
            removeEditTr();
            addEditAttributeElements(attr, ct, type, j - 1);

        });

        addBtn.style.width = '62%';
		addBtn.className = 'btn-purple';
        newProp.appendChild(addBtn);

    }

};

/**
 * 创建扩展面板
 */
AttributePanel.prototype.createEnhancedPanel = function()
{
	var ui = this.editorUi;
    var diagramType = ui.interfaceParams.type;
    var title = this.createTitle(mxResources.get('enhancedPanel'));
    title.style.paddingLeft = '18px';
    title.style.paddingTop = '10px';
    title.style.paddingBottom = '6px';
    this.container.appendChild(title);

    var div = this.createPanel();
    this.container.appendChild(div);
    var enhDiv = document.createElement('div');
    enhDiv.style.whiteSpace = 'nowrap';
    enhDiv.style.marginTop = '10px';
    enhDiv.style.textAlign = 'center';
    div.appendChild(enhDiv);

    var enhBtn = mxUtils.button(mxResources.get('open'), openEnhancedPanel);
    enhBtn.style.width = '62%';
    enhBtn.className = 'btn-purple';
    enhDiv.appendChild(enhBtn);

    function openEnhancedPanel()
	{
		var enhancedPanel = document.getElementsByClassName('geEnhanced')[0];
		if (enhancedPanel) {
			enhancedPanel.parentNode.removeChild(enhancedPanel);
		}
		createNewPanel();
	}

	function createNewPanel()
	{
		var currentCell;
        var vgDesignerDiv = document.getElementsByClassName('geEditor')[0];
        var sidebar = document.getElementsByClassName('geSidebarContainer')[1];
        var div = document.createElement('div');
        div.style.width = 0.7 * document.body.clientWidth + 'px';
        div.style.height = sidebar.style.height;
        div.className = 'geEnhanced';

        //左右两部分Div
        var leftDiv = document.createElement('div');
        var rightDiv = document.createElement('div');
        leftDiv.className = 'geEnhancedLeftDiv';
        rightDiv.className = 'geEnhancedRightDiv';

        // 左侧顶部栏
        var leftTitle = document.createElement('div');
        leftTitle.className = 'geEnhancedTitle';
        var title = document.createElement('label');
        title.className = 'geEnhancedLabel';
        title.innerHTML = mxResources.get('resourceList');
        leftTitle.appendChild(title);
        var closeImg = document.createElement('img');
        closeImg.setAttribute('src', Format.prototype.rightClose);
        closeImg.className = 'geEnhancedCloseImg';
        leftTitle.appendChild(closeImg);
        leftDiv.appendChild(leftTitle);
        mxEvent.addListener(closeImg, 'click', function() {
        	div.parentNode.removeChild(div);
			ui.format.refresh();
        });

        //右侧顶部栏
        var rightTitle = document.createElement('div');
        rightTitle.className = 'geEnhancedTitle';
        title = document.createElement('label');
        title.className = 'geEnhancedLabel';
        title.innerHTML = mxResources.get('attribute');
        rightTitle.appendChild(title);
        var saveImg = document.createElement('img');
        saveImg.setAttribute('src', Format.prototype.sureImage);
        saveImg.className = 'geEnhancedSaveDiv';
        rightTitle.appendChild(saveImg);
        rightDiv.appendChild(rightTitle);
		//监听点击保存事件
        mxEvent.addListener(saveImg, 'click', function(){
            var names = document.getElementsByClassName('geEnhancedInputN');
            var allNames = [];
            for(var i = 0; i < names.length; i++) {
                if (names[i].value == '') {
                    mxUtils.alert(mxResources.get('propertyNameIsEmpty'));
                    return false;
                }
                allNames.push(names[i].value);
            }
            var ret = mxUtils.checkArrayIfDuplicateValues(allNames);
            if(ret.status)
            {
                window.alert(mxResources.get('duplicateName') + ': "' + ret.data +'"');
                return false;
            }
            var value = currentCell.value;
            var intrinsic = document.getElementsByClassName('geEnhancedIntrinsic');
            var arr = [];
            for(var i = 0; i < intrinsic.length; i++) {
                var obj = {};
                obj.name = intrinsic[i].getElementsByClassName('geEnhancedInputN')[0].value;
                obj.description = '';
                obj.dataType = '';
                obj.value = [intrinsic[i].getElementsByClassName('geEnhancedValueInput')[0].value];
                obj.operator = [''];
                obj.logic = [''];
                arr.push(obj);
            }
            value.setAttribute('intrinsic', JSON.stringify(arr));

            var extended = document.getElementsByClassName('geEnhancedExtended');
            arr = [];
            for(var i = 0; i < extended.length; i++) {
                var obj = {};
                // { "name": "", "description": "", "dataType": "", "value": [""], "operator":[''], 'logic':[""] };
                obj.name = extended[i].getElementsByClassName('geEnhancedInputN')[0].value;
                obj.description = extended[i].getElementsByClassName('geEnhancedDefInput')[0].value;
                obj.dataType = extended[i].getElementsByClassName('geEnhancedSelectType')[0].value;
                var tmp = extended[i].getElementsByClassName('geEnhancedValueInput');
                var tmpArr = [];
                for(var j = 0; j < tmp.length; j++) {
                    tmpArr.push(tmp[j].value);
                }
                obj.value = tmpArr;
                tmp = extended[i].getElementsByClassName('geEnhancedSelectOpr');
                tmpArr = [];
                for(var j = 0; j < tmp.length; j++) {
                    tmpArr.push(tmp[j].value);
                }
                obj.operator = tmpArr;
                tmp = extended[i].getElementsByClassName('geEnhancedSelectLgc');
                tmpArr = [];
                for(var j = 0; j < tmp.length; j++) {
                    tmpArr.push(tmp[j].value);
                }
                obj.logic = tmpArr;
                arr.push(obj);
            }
            value.setAttribute('extended', JSON.stringify(arr));

            graph.getModel().setValue(currentCell, value);

            mxUtils.alert(mxResources.get('saved'));
            return true;
        });

        //左侧列表
        var listDiv = document.createElement('div');
        listDiv.className = 'geEnhancedList';
        leftDiv.appendChild(listDiv);

        div.appendChild(leftDiv);
        div.appendChild(rightDiv);
        vgDesignerDiv.appendChild(div);

        var graph = ui.editor.graph;
        var root = graph.getModel().getRoot();
		var level = 1;
		var marginLeft = 16;
		var lastClickObj = null;		//上一个点击的对象
		var clickColor = '#ebebeb';		//选择item后的背景颜色

		//点击item设置div背景色
		var itemSelect = function(ele) {
            if(lastClickObj) {
                lastClickObj.style.backgroundColor = '';
            }
            lastClickObj = ele;
            ele.style.backgroundColor = clickColor;
		};

		//打开右侧属性面板
		var openAttributePanel = function(cell) {
            currentCell = cell;
			var ele = document.getElementsByClassName('geEnhancedRightDiv1');
			if(ele && ele.length > 0) {
				for(var i = 0; i < ele.length; i++) {
					ele[i].parentNode.removeChild(ele[i]);
				}
			}
            var container = document.createElement('div');
            container.className = 'geEnhancedRightDiv1';
            rightDiv.appendChild(rightTitle);
            rightDiv.appendChild(container);

            var value = cell.value;
            var attrs = value.attributes;
            var tObj = {};
            if(attrs) {
                for (var i = 0; i < attrs.length; i++)
                {
                    if (attrs[i].nodeName == 'intrinsic' || attrs[i].nodeName == 'extended' || attrs[i].nodeName == 'userFunc')
                    {
                        tObj[attrs[i].nodeName] = JSON.parse(attrs[i].nodeValue);
                    }
                }
			}

            if(Object.keys(tObj).length < 2)
            {
                tObj['intrinsic'] = (tObj['intrinsic'] != null) ? tObj['intrinsic'] : [];
                tObj['extended'] = (tObj['extended'] != null) ? tObj['extended'] : [];
                // tObj['userFunc'] = (tObj['userFunc'] != null) ? tObj['userFunc'] : [];
            }
            //拓扑图最外层不需要动态属性
            if(tObj['extended'] && ui.interfaceParams.type != 'model' && cell.getId() == '0') {
                delete tObj['extended'];
            }
            listAttributes(container, cell, tObj);
		};

		//显示属性
		var listAttributes = function(container, cell, object) {
			var cellId = cell.getId();
            for (var i in object) {
                var cont = addTitle(container, i);
                if(i == 'intrinsic') {
                    for(var o in object[i]) {
                        addIntrinsicAttributes(cont, object[i][o])
                    }
				}
				else if(i == 'extended') {
                    for(var o in object[i]) {
                        addExtendedAttributes(cont, object[i][o]);
                    }
				}
            }

            if((cell.getStyle() && cell.getStyle().indexOf('group')) >= 0 || (cellId == '0' && ui.interfaceParams.type == 'model')) {
                addImgTitle(container, 'image');
            }

            //添加属性分类标题
            function addTitle(container, e) {
            	var title = mxResources.get(e);
                var titleDiv = document.createElement('div');
                titleDiv.className = 'geEnhancedSideTitle';
				titleDiv.style.backgroundImage = 'url(\'' + IMAGE_PATH + '/expanded.gif' + '\')';
                mxEvent.addListener(titleDiv, 'click', function () {
                	var next = titleDiv.nextSibling;
                    if (next.style.display == 'block' || next.style.display == '') {
                        next.style.display = 'none';
						titleDiv.style.backgroundImage = 'url(\'' + IMAGE_PATH + '/collapsed.gif'  + '\')';
                    } else {
                        next.style.display = 'block';
						titleDiv.style.backgroundImage = 'url(\'' + IMAGE_PATH + '/expanded.gif'  + '\')';
                    }
				});
                var titleLab = document.createElement('label');
                titleLab.className = 'geEnhancedTitleLab';
                titleLab.innerHTML = title;
                titleDiv.appendChild(titleLab);
                var titleSpan = document.createElement('span');
                titleSpan.className = 'geEnhancedAddCon icon-24 icon-add';
                titleDiv.appendChild(titleSpan);
                container.appendChild(titleDiv);
                var titleCon = document.createElement('div');
                titleCon.className = 'geEnhancedTitleCon';
                container.appendChild(titleCon);

                //监听新增按钮点击事件
                mxEvent.addListener(titleSpan, 'click', function(evt) {
                	var list = this.parentNode.nextSibling;
                	if(list.style.display == 'none') {
                		list.style.display = 'block';
					}
                    if(e == 'intrinsic')
					{
                        addIntrinsicAttributes(titleCon);
					}
					else if(e == 'extended')
					{
                        addExtendedAttributes(titleCon);
					}
                    if (window.event) {
                        window.event.cancelBubble = true;
                    } else {
                        evt.stopPropagation();
                    }
                });
                return titleCon;
            }

            //添加静态属性
            function addIntrinsicAttributes(container, obj) {
            	obj = obj || { "name": "", "description": "", "dataType": "", "value": [""], "operator":[''], 'logic':[""] };
				var defDiv = document.createElement('div');
				defDiv.className = 'geEnhancedProDiv geEnhancedIntrinsic';
				container.appendChild(defDiv);
				var inputN = document.createElement('input');
				inputN.className = 'geEnhancedInputN';
				inputN.placeholder = 'Key';
				inputN.value = obj.name;
				if(diagramType == 'model' && cellId == '0' && (obj.name == 'name' || obj.name == 'category' || obj.name == 'type')) {
					inputN.disabled = 'disabled';
				}
				defDiv.appendChild(inputN);
				var inputEn = document.createElement('input');
				inputEn.className = 'geEnhancedValueInput';
				inputEn.placeholder = 'Value';
				inputEn.value = obj.value[0];
				defDiv.appendChild(inputEn);
                if((diagramType != 'model') || (diagramType == 'model' && ((cellId != '0') || (cellId == '0' && obj.name != 'name' && obj.name != 'category' && obj.name != 'type')))) {
                    var del = document.createElement('img');
                    del.className = 'geEnhancedDel';
                    del.setAttribute('src', Dialog.prototype.closeImage);
                    defDiv.appendChild(del);
                    var br = document.createElement('br');
                    defDiv.appendChild(br);

                    // del监听事件
                    mxEvent.addListener(del, 'click', function () {
                        var ret = mxUtils.confirm(mxResources.get('sureToDelete', ['"' + this.parentNode.firstChild.value + '"']) + '?');
                        if(ret) {
                            this.parentNode.parentNode.removeChild(this.parentNode);
                        }
                    });
                }
			}

			//添加动态属性
            function addExtendedAttributes(container, obj) {
                obj = obj || { "name": "", "description": "", "dataType": "", "value": [""], "operator":[''], 'logic':[""] };
                var div = document.createElement('div');
                div.className = 'geEnhancedProDiv geEnhancedExtended';
                container.appendChild(div);
                var nDiv = document.createElement('div');
                nDiv.style.display = 'inline-block';
				nDiv.style.verticalAlign = 'top';
                div.appendChild(nDiv);

                var inputN = document.createElement('input');
                inputN.className = 'geEnhancedInputN';
                inputN.placeholder = 'Name';
				inputN.value = obj.name;
                nDiv.appendChild(inputN);
                var inputEn = document.createElement('input');
                inputEn.className = 'geEnhancedDefInput';
                inputEn.placeholder = 'Description';
				inputEn.value = obj.description;
                nDiv.appendChild(inputEn);
                var select = document.createElement('select');
                select.className = 'geEnhancedSelectType';
                for(var i in ui.attributeDataType) {
                    var opt = document.createElement('option');
                    opt.setAttribute('value', ui.attributeDataType[i]);
                    mxUtils.write(opt, mxResources.get(ui.attributeDataType[i]));
                    select.appendChild(opt);
                    if(obj.dataType == ui.attributeDataType[i]){
                        opt.setAttribute('selected', 'true');
                    }
                }
                nDiv.appendChild(select);

                var lDiv = document.createElement('div');
                lDiv.style.display = 'inline-block';
                div.appendChild(lDiv);

				addAttributeCondition(lDiv, obj);

                var iDiv = document.createElement('div');
                iDiv.style.display = 'inline-block';
				iDiv.style.verticalAlign = 'top';
                div.appendChild(iDiv);
                var del = document.createElement('img');
                del.className = 'geEnhancedDel';
                del.setAttribute('src', Dialog.prototype.closeImage);
                iDiv.appendChild(del);

                //select数据类型改变监听事件
				mxEvent.addListener(select, 'change', function(){
					var dType = this.value;
					var ele = this.parentNode.nextSibling.getElementsByClassName('geEnhancedSelectOpr');
					for(var i = 0; i < ele.length; i++) {
                        ele[i].options.length = 0;
                        for (var j in ui.attributeOperator[dType]) {
                            var opt = document.createElement('option');
                            opt.setAttribute('value', ui.attributeOperator[dType][j]);
                            mxUtils.write(opt, ui.attributeOperator[dType][j]);
                            ele[i].appendChild(opt);
                        }
                    }
				});
                // del监听事件
                mxEvent.addListener(del, 'click', function () {
                	var ret = mxUtils.confirm(mxResources.get('sureToDelete', ['"' + this.parentNode.parentNode.firstChild.firstChild.value + '"']) + '?');
                	if(ret) {
                        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                    }
                });

            };

            //添加属性的操作符、值和逻辑操作符
            function addAttributeCondition(container, obj) {
                var dType = obj.dataType || 'string';
				for(var i in obj.value) {
                    var operator = obj.operator[i];
                    var value = obj.value[i];
                    var logic = obj.logic[i];
                    var oSelect = document.createElement('select');
                    oSelect.className = 'geEnhancedSelectOpr';
                    for(var j in ui.attributeOperator[dType]) {
                        var opt = document.createElement('option');
                        opt.setAttribute('value', ui.attributeOperator[dType][j]);
                        mxUtils.write(opt, ui.attributeOperator[dType][j]);
                        oSelect.appendChild(opt);
                        if (operator == ui.attributeOperator[dType][j]) {
                            opt.setAttribute('selected', 'true');
                        }
                    }
                    container.appendChild(oSelect);
                    var vInput = document.createElement('input');
                    vInput.className = 'geEnhancedValueInput';
                    vInput.placeholder = 'Value';
                    vInput.value = value;
                    container.appendChild(vInput);
					var lSelect = document.createElement('select');
					lSelect.className = 'geEnhancedSelectLgc'
					for(var j in ui.attributeLogic) {
						var opt = document.createElement('option');
						opt.setAttribute('value', ui.attributeLogic[j]);
						mxUtils.write(opt, ui.attributeLogic[j]);
                        lSelect.appendChild(opt);
						if(logic == ui.attributeLogic[j]){
							opt.setAttribute('selected', 'true');
						}
					}
                    container.appendChild(lSelect);
                    var br = document.createElement('br');
                    container.appendChild(br);

                    //监听逻辑操作符修改事件
					mxEvent.addListener(lSelect, 'change', function(){
                        var ele = this.parentNode.getElementsByClassName('geEnhancedSelectLgc');
                        var len = ele.length;
                        if(len > 0 && ele[len - 1] == this && this.value != 'none') {
                            var dType = this.parentNode.previousSibling.getElementsByClassName('geEnhancedSelectType')[0].value;
                            var obj = { "name": "", "description": "", "dataType": dType, "value": [""], "operator":[''], 'logic':[""] };
                            addAttributeCondition(container, obj);
						}
						if(this.value == 'none') {
							for(var j = ele.length - 1; j >= 0; j--) {
								if(ele[j] == this) {
									break;
								}
                                ele[j].parentNode.removeChild(ele[j].previousSibling);
                                ele[j].parentNode.removeChild(ele[j].previousSibling);
                                ele[j].parentNode.removeChild(ele[j].nextSibling);
                                ele[j].parentNode.removeChild(ele[j]);
							}
						}
					});
				}
            }

            //添加图标
            function addImgTitle(container, e) {
				var value = currentCell.value;
				
                var title = document.createElement('div');
                title.className = 'geEnhancedSideTitle';
                var titleLab = document.createElement('label');
                titleLab.className = 'geEnhancedTitleLab';
                titleLab.innerHTML = mxResources.get(e);
                title.appendChild(titleLab);
                container.appendChild(title);
                var titleCon = document.createElement('div');
                titleCon.className = 'geEnhancedTitleCon';
                container.appendChild(titleCon);

                mxEvent.addListener(title, 'click', function () {
                    var next = title.nextSibling;
                    if (next.style.display == 'block' || next.style.display == '') {
                        next.style.display = 'none';
                    } else {
                        next.style.display = 'block';
                    }
                });
				var imgDiv = document.createElement('div');
				imgDiv.className = 'geEnhancedProDiv';
                titleCon.appendChild(imgDiv);

				var imgShowDiv = document.createElement('div');
				imgShowDiv.style.float = 'left';
				imgShowDiv.style.height = '60px';
				imgShowDiv.style.lineHeight = '40px';
				var image = document.createElement('img');
				image.style.maxWidth = '60px';
				image.style.maxHeight = '60px';
				image.style.padding = '0 10px';
				image.style.verticalAlign = 'middle';
				image.src = (value.getAttribute('image') && value.getAttribute('image') != 'null') ? value.getAttribute('image') : mxGraph.prototype.collapsedImage.src;
				imgShowDiv.appendChild(image);
				imgDiv.appendChild(imgShowDiv);

				var imgInsDiv = document.createElement('div');
				imgInsDiv.style.float = 'left';
				imgInsDiv.style.height = '60px';
				imgInsDiv.style.lineHeight = '60px';
				var imgA = document.createElement('a');
				imgA.className = 'fileA btn-purple';
				mxUtils.write(imgA, mxResources.get('selectThumbnail'));
				var imgInput = document.createElement('input');
				imgInput.className = 'fileInput';
				imgInput.setAttribute('type', 'file');
				imgInput.setAttribute('accept', 'image/png,image/jpeg');
				imgA.appendChild(imgInput);
				imgInsDiv.appendChild(imgA);
				imgDiv.appendChild(imgInsDiv);

				mxEvent.addListener(imgInput, 'change', mxUtils.bind(this,function(){
					ui.format.panels[0].uploadImg(imgInput, image, currentCell, value);
				}));
            };
        };

		//点击列表项
        var itemClick = function(ele, cell) {
            mxEvent.addListener(ele, 'click', function () {
                if(lastClickObj != ele) {
                    openAttributePanel(cell);
				}
         		itemSelect(ele);
            });
        };

        //显示列表
		var listShow = function(current, isRoot, container, expandImg) {
			// 展开/折叠
            if(expandImg) {
                mxEvent.addListener(expandImg, 'click', function () {
                    if (container.style.display == 'block') {
                        container.style.display = 'none';
                        expandImg.setAttribute('src', Sidebar.prototype.collapsedImage);
                    } else {
                        container.style.display = 'block';
                        expandImg.setAttribute('src', Sidebar.prototype.expandedImage);
                    }
                });
            }
			var leftPx = level * marginLeft + 'px';
            level = isRoot ? level : level + 1;
            var count = isRoot ? 1 : current.length;
            for(var i = 0; i < count; i++) {
            	var cell = isRoot ? current : current[i];
                var children = isRoot ? (cell.children[0].children ? cell.children[0].children : null) : (cell.children ? cell.children : null);
                var childCount = children ? children.length : 0;
                var name = mxUtils.getCellAttributeValue(cell, 'name');
				var title;
                if(isRoot) {
                    title = 'Root of ' + diagramType + (name ? ':' + name : '');
				}
				else {
                    var id = cell.getId();
                    title = 'ID:' + id + ',' + (name ? 'name:' + name + ',' : '') + '(' + cell.style.split(';')[0] + ')';
				}
                var div = document.createElement('div');
                // div.id = key[i];
                div.className = isRoot ? 'geEnhancedRoot' : 'geEnhancedItem';
                itemClick(div, cell);
                container.appendChild(div);
                var enLabel = document.createElement('label');
                enLabel.style.whiteSpace = 'nowrap';
                enLabel.innerHTML = title;
                if(!isRoot && childCount == 0) {
                    enLabel.style.marginLeft = leftPx;
                } else {
                    enLabel.style.marginLeft = '5px';
                }
                div.appendChild(enLabel);
                if(childCount > 0) {
                    var img = document.createElement('img');
                    img.setAttribute('src', Sidebar.prototype.collapsedImage);
                    img.className = 'geEnhancedListImg';
                    if(!isRoot) {
                    	img.style.marginLeft = leftPx;
                    }
                    div.appendChild(img);
                    var div1 = document.createElement('div');
                    div1.className = 'geEnhancedListItem';
                    container.appendChild(div1);
                    listShow(children, false, div1, img);
                }
            }
            level = isRoot ? level : level - 1;
		};

        listShow(root, true, listDiv);

        //默认打开root属性
        currentCell = root;
        openAttributePanel(currentCell);
	}

};

AttributePanel.prototype.createEnhanced = function()
{
    // var ui = this.editorUi;
    // var graph = ui.editor.graph;
    var container = this.container;

    var title = this.createTitle(mxResources.get('enhancedPanel'));
    title.style.paddingLeft = '18px';
    title.style.paddingTop = '10px';
    title.style.paddingBottom = '6px';
    container.appendChild(title);

    var div = this.createPanel();
    this.container.appendChild(div);
    var enhancedDiv = document.createElement('div');
    enhancedDiv.style.whiteSpace = 'nowrap';
    enhancedDiv.style.marginTop = '10px';
    enhancedDiv.style.textAlign = 'center';
    div.appendChild(enhancedDiv);

    var enBtn = mxUtils.button(mxResources.get('open'), Enhanced);

    enBtn.style.width = '62%';
    enBtn.className = 'btn-purple';
    enhancedDiv.appendChild(enBtn);


    // var container = this.container;
    // var leftcoll = document.createElement('img');
    // leftcoll.setAttribute('src', Format.prototype.leftOpen);
    // leftcoll.className = 'geleftcoll';
    // container.appendChild(leftcoll);

    function Enhanced() {
        var enhanced = document.getElementsByClassName('geEnhanced')[0];
        if(enhanced){
            enhanced.style.display = 'block';
        }
        else {
            var editorcon = document.getElementsByClassName('geEditor')[0];
            var side = document.getElementsByClassName('geSidebarContainer')[0];
            var div = document.createElement('div');
            div.style.width = 0.7 * document.body.clientWidth + 'px';
            div.style.height = side.style.height;
            div.className = 'geEnhanced';

            //左右两部分Div
            var leftD = document.createElement('div');
            var rightD = document.createElement('div');
            leftD.className = 'geEnhancedLeftDiv';
            rightD.className = 'geEnhancedRightDiv';

            // 左侧顶部栏
            var leftT = document.createElement('div');
            leftT.className = 'geEnhancedTitle';
            var labL = document.createElement('label');
            labL.className = 'geEnhancedLabel';
            labL.innerHTML = 'LTE-TDD';
            leftT.appendChild(labL);
            var colDiv = document.createElement('img');
            colDiv.setAttribute('src', Format.prototype.rightClose);
            colDiv.className = 'geEnhancedCloseImg';
            leftT.appendChild(colDiv);

            mxEvent.addListener(colDiv, 'click', function () {
                div.style.display = 'none';
                // div.parentNode.removeChild(div);
            });

            leftD.appendChild(leftT);


            //右侧顶部栏
            var rightT = document.createElement('div');
            rightT.className = 'geEnhancedTitle';
            var labR = document.createElement('label');
            labR.className = 'geEnhancedLabel';
            labR.innerHTML = 'ATTRIBUTE OF MODEL';
            rightT.appendChild(labR);
            var okDiv = document.createElement('img');
            okDiv.setAttribute('src', Format.prototype.sureImage);
            okDiv.className = 'geokDiv';
            rightT.appendChild(okDiv);
            rightD.appendChild(rightT);


            //左侧列表
            var side = document.createElement('div');
            side.className = 'geside';
            leftD.appendChild(side);

            var addOl = function (name,li,conname,img,oldiv) {
                var liCon = document.createElement('div');
                liCon.id =conname + 'liCon';
                liCon.className = 'geolCon';
                oldiv.appendChild(liCon);


                for (var i = 0; i < name.length; i++) {
                    var ol = document.createElement('div');
                    // ol.id = name[i] + 'ol';
                    ol.className = 'gesideOl';
                    ol.innerHTML = name[i];
                    liCon.appendChild(ol);
                }

                mxEvent.addListener(img, 'click', function()
                {
                    if(liCon.style.display == 'block'){
                        liCon.style.display = 'none';
                        img.setAttribute('src', Sidebar.prototype.collapsedImage);
                    }else{
                        liCon.style.display = 'block';
                        img.setAttribute('src', Sidebar.prototype.expandedImage);
                    }
                });


            };

            var addLi = function (name,ul,title,img) {
                var titleCon = document.createElement('div');
                titleCon.id =title + 'Con';
                titleCon.className = 'geliCon';
                side.appendChild(titleCon);
                for (var i = 0; i < name.length; i++) {
                    var li = document.createElement('div');
                    li.id = name[i] + 'li';
                    li.className = 'gesideLi';
                    titleCon.appendChild(li);
                    var liLabel = document.createElement('label');
                    liLabel.innerHTML = name[i];
                    liLabel.className = 'geenLabel';
                    li.appendChild(liLabel);
                    var sideliCol = document.createElement('img');
                    sideliCol.setAttribute('src', Sidebar.prototype.collapsedImage);
                    sideliCol.className = 'gesideliCol';
                    li.appendChild(sideliCol);
                    addOl(['aaaa,aaaa,aaaa,aaaa,aaaa,aaaa,aaaa aaaa aaaa aaaa', 'bbbbb', 'ccc'],li,name[i],sideliCol,titleCon);
                }

                mxEvent.addListener(img, 'click', function()
                {
                    if(titleCon.style.display == 'block'){
                        titleCon.style.display = 'none';
                        img.setAttribute('src', Sidebar.prototype.collapsedImage);
                    }else{
                        titleCon.style.display = 'block';
                        img.setAttribute('src', Sidebar.prototype.expandedImage);
                    }
                });
            };

            var addName = function (key) {
                for (var i = 0; i < key.length; i++) {
                    var ul = document.createElement('div');
                    ul.id = key[i];
                    ul.className = 'gesideUl';
                    side.appendChild(ul);
                    var enLabel = document.createElement('span');
                    enLabel.innerHTML = key[i];
                    enLabel.className = 'geenLabel';
                    ul.appendChild(enLabel);
                    var sideCol = document.createElement('img');
                    sideCol.setAttribute('src', Sidebar.prototype.collapsedImage);
                    sideCol.className = 'gesideCol';
                    ul.appendChild(sideCol);

                    addLi(['1111', '222', '333,333,333,333,333,','4444,4444,4444,4444,4444,4444,4444,4444,4444,'],ul,key[i],sideCol);
                }
            };
            addName(['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE']);


            //右侧属性
            var con = document.createElement('div');
            con.className = 'gecon';
            rightD.appendChild(rightT);
            rightD.appendChild(con);


            var addpro = function (conDiv) {
                var div = document.createElement('div');
                div.className = 'geproDiv';
                conDiv.appendChild(div);
                var inputN = document.createElement('input');
                inputN.className = 'geinputN';
                inputN.placeholder = 'NAME';
                div.appendChild(inputN);
                var inputEn = document.createElement('input');
                inputEn.className = 'gedefInput';
                inputEn.placeholder = 'Type';
                div.appendChild(inputEn);
                var select = document.createElement('select');
                select.className = 'geselectType';
                div.appendChild(select);
                var optN1 = document.createElement('option');
                optN1.innerHTML = 'String';
                var optN2 = document.createElement('option');
                optN2.innerHTML = 'Number';
                select.appendChild(optN1);
                select.appendChild(optN2);
                var select2 = document.createElement('select');
                select2.className = 'geselectNo';
                div.appendChild(select2);
                var optN3 = document.createElement('option');
                optN3.innerHTML = '==';
                var optN4 = document.createElement('option');
                optN4.innerHTML = '!==';
                select2.appendChild(optN3);
                select2.appendChild(optN4);
                var inputV = document.createElement('input');
                inputV.className = 'gedefInput';
                inputV.placeholder = 'Value';
                div.appendChild(inputV);
                var select3 = document.createElement('select');
                select3.className = 'geselectOpe';
                div.appendChild(select3);
                var optN5 = document.createElement('option');
                optN5.innerHTML = 'none';
                optN5.value = 'none';
                var optN6 = document.createElement('option');
                optN6.innerHTML = 'and';
                optN6.value = 'and';
                var optN7 = document.createElement('option');
                optN7.innerHTML = 'or';
                optN7.value = 'or';
                select3.appendChild(optN5);
                select3.appendChild(optN6);
                select3.appendChild(optN7);
                var del = document.createElement('img');
                del.className = 'geDel';
                del.setAttribute('src', Dialog.prototype.closeImage);
                div.appendChild(del);
                var br = document.createElement('br');
                div.appendChild(br);

                // del监听事件
                var childs = div.childNodes;
                var childsL = childs.length;
                mxEvent.addListener(del, 'click', function () {
                    for (var i = 0; i < childsL; i++) {
                        div.removeChild(div.firstChild);
                    }
                });
            };

            var addTitle = function (tit) {
                var title = document.createElement('div');
                title.className = 'gesideTitle';
                title.id = tit;
                var titleLab = document.createElement('label');
                titleLab.className = 'getitleLab';
                titleLab.innerHTML = tit;
                title.appendChild(titleLab);
                var addCon = document.createElement('span');
                addCon.className = 'geaddCon icon-24 icon-add';
                // addCon.setAttribute('src', Format.prototype.addproCon);
                title.appendChild(addCon);
                con.appendChild(title);
                var titleCon = document.createElement('div');
                titleCon.className = 'getitleCon';
                titleCon.id = tit + 'Con';
                con.appendChild(titleCon);

                var adddef = function (div, key, value) {
                    var defDiv = document.createElement('div');
                    defDiv.className = 'geproDiv';
                    div.appendChild(defDiv);
                    var inputN = document.createElement('input');
                    inputN.className = 'geinputN';
                    inputN.placeholder = 'NAME';
                    defDiv.appendChild(inputN);
                    var inputEn = document.createElement('input');
                    inputEn.className = 'gedefInput';
                    inputEn.placeholder = value;
                    defDiv.appendChild(inputEn);
                    var del = document.createElement('img');
                    del.className = 'gedefDel';
                    del.setAttribute('src', Dialog.prototype.closeImage);
                    defDiv.appendChild(del);
                    var br = document.createElement('br');
                    defDiv.appendChild(br);

                    // del监听事件
                    var childs = defDiv.childNodes;
                    var childsL = childs.length;
                    mxEvent.addListener(del, 'click', function () {
                        for (var i = 0; i < childsL; i++) {
                            defDiv.removeChild(defDiv.firstChild);
                        }
                    });

                };
                adddef(titleCon, 'NAME', 'name');
                adddef(titleCon, 'TYPE', 'type');
                adddef(titleCon, 'CATEGORY', 'category');
                mxEvent.addListener(addCon, 'click', function (oEvent) {
                    adddef(titleCon);
                    if (window.event) {
                        window.event.cancelBubble = true;
                    } else {
                        oEvent.stopPropagation();
                    }
                });

            };

            var addDefTitle = function (tit) {
                var title = document.createElement('div');
                title.className = 'gesideTitle';
                title.id = tit;
                var titleLab = document.createElement('label');
                titleLab.className = 'getitleLab';
                titleLab.innerHTML = tit;
                title.appendChild(titleLab);
                var addCon = document.createElement('span');
                addCon.className = 'geaddCon icon-24 icon-add';
                addCon.setAttribute('src', Format.prototype.addproCon);
                title.appendChild(addCon);
                con.appendChild(title);
                var titleCon = document.createElement('div');
                titleCon.className = 'getitleCon';
                titleCon.id = tit + 'Con';
                con.appendChild(titleCon);

                // 添加自定义属性事件
                mxEvent.addListener(addCon, 'click', function (oEvent) {
                    addpro(titleCon);
                    if (window.event) {
                        window.event.cancelBubble = true;
                    } else {
                        oEvent.stopPropagation();
                    }
                });
            };

            var addImgTitle = function (tit) {
                var title = document.createElement('div');
                title.className = 'gesideTitle';
                title.id = tit;
                var titleLab = document.createElement('label');
                titleLab.className = 'getitleLab';
                titleLab.innerHTML = tit;
                title.appendChild(titleLab);
                con.appendChild(title);
                var titleCon = document.createElement('div');
                titleCon.className = 'getitleCon';
                titleCon.id = tit + 'Con';
                con.appendChild(titleCon);

                var addimg = function (conDiv) {
                    var div = document.createElement('div');
                    div.className = 'geproDiv';
                    conDiv.appendChild(div);
                    var inputI = document.createElement('input');
                    inputI.className = 'geinputI';
                    inputI.type = 'file';
                    div.appendChild(inputI);
                };
                // 添加图片事件
                addimg(titleCon);
            };


            addTitle(mxResources.get('intrinsic'));

            addDefTitle(mxResources.get('extended'));

            addImgTitle('IMAGE');


            div.appendChild(leftD);
            div.appendChild(rightD);
            editorcon.appendChild(div);


            var liDiv = document.getElementsByClassName('gesideLi');
            var liChange = document.getElementsByClassName('geliChange');
            var olDiv = document.getElementsByClassName('gesideOl');
            var olChange = document.getElementsByClassName('geolChange');
            var ulDiv = document.getElementsByClassName('gesideUl');
            var ulChange = document.getElementsByClassName('geulChange');

            for (var i = 0; i < ulDiv.length; i++)
            {
                mxEvent.addListener(ulDiv[i], 'click', function () {
                    for (var k = 0; k < olChange.length; k++) {
                        olChange[k].className = "gesideOl";
                    }
                    for (var j = 0; j < liChange.length; j++) {
                        liChange[j].className = "gesideLi";
                    }
                    for (var n = 0; n < ulChange.length; n++) {
                        ulChange[n].className = "gesideUl";
                    }
                    this.className = "geulChange";
                });
            }

            for (var i = 0; i < liDiv.length; i++)
            {
                mxEvent.addListener(liDiv[i], 'click', function () {
                    for (var k = 0; k < olChange.length; k++) {
                        olChange[k].className = "gesideOl";
                    }
                    for (var j = 0; j < liChange.length; j++) {
                        liChange[j].className = "gesideLi";
                    }
                    for (var n = 0; n < ulChange.length; n++) {
                        ulChange[n].className = "gesideUl";
                    }
                    this.className = "geliChange";
                });
            }

            for (var i = 0; i < olDiv.length; i++) {
                mxEvent.addListener(olDiv[i], 'click', function () {
                    for (var j = 0; j < liChange.length; j++) {
                        liChange[j].className = "gesideLi";
                    }
                    for (var k = 0; k < olChange.length; k++) {
                        olChange[k].className = "gesideOl";
                    }
                    for (var n = 0; n < ulChange.length; n++) {
                        ulChange[n].className = "gesideUl";
                    }
                    this.className = "geolChange";
                });
            };

            //INcol监听事件
            var titlecoll1 = document.getElementById('Static Properties');
            mxEvent.addListener(titlecoll1, 'click', function () {
                var titlecon1 = document.getElementById('Static PropertiesCon');
                if (titlecon1.style.display == 'block') {
                    titlecon1.style.display = 'none';
                } else {
                    titlecon1.style.display = 'block';
                }
            });

            //EXcol监听事件
            var titlecoll2 = document.getElementById('Dynamic Properties');
            mxEvent.addListener(titlecoll2, 'click', function () {
                var titlecon2 = document.getElementById('Dynamic PropertiesCon');
                if (titlecon2.style.display == 'block') {
                    titlecon2.style.display = 'none';
                } else {
                    titlecon2.style.display = 'block';
                }
            });
            //IMcol监听事件
            var titlecoll4 = document.getElementById('IMAGE');
            mxEvent.addListener(titlecoll4, 'click', function () {
                var titlecon4 = document.getElementById('IMAGECon');
                if (titlecon4.style.display == 'block') {
                    titlecon4.style.display = 'none';
                } else {
                    titlecon4.style.display = 'block';
                }
            });

        }
    }

}
